/* Override browser styles */

/** default local vars **/
/* body {
    --current_text_color: var(--text);
    --current_text_color_highlight: var(--text_highlight);
} */

light-root, uix-fragment, uix-placeholder, frontend-slot {
    display: contents;
}

uix-editable {
    display: inline-block;
}

uix-editable[contenteditable]:focus {
    outline: 3px dashed var(--text);
    outline-offset: 24px;
    position: relative;

    &::after {
        content: attr(data-placeholder);
        width: 100vw;
        height: 1000vh;
        position: absolute;
        left: calc(100% + 27px);
        top: -500vh;
        backdrop-filter: grayscale(100%);
        /* background-color: red; */
        z-index: 100000;
    }
}

frontend-slot > * {
    all: inherit;
    display: revert;
    display: revert-layer;
}

:root {
    --current_text_color: var(--text);
    --current_text_color_highlight: var(--text_highlight);
    color: var(--current_text_color);
}

/* Scrollbar */
/* ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
    display: none;
    -webkit-appearance: none;
} */
/* ::-webkit-scrollbar-track {
    background: transparent;
} */
/* * {
    -ms-overflow-style: none;
    scrollbar-width: none;
} */




.uix-scrollbar-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    top: var(--scrollY);
    left: var(--scrollX);
    pointer-events: none;
}


.uix-scrollbar {
    --width: 8px;
    pointer-events: all;
    position: absolute;
    background-color: rgba(100, 100, 100, 0.3);
    border-radius: var(--width);
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    margin: 5px;
    z-index: 2;
}

:host(:hover) .uix-scrollbar {
    opacity: 1;
}

.uix-scrollbar:hover {
    background-color: rgba(100, 100, 100, 0.5);
}

.uix-scrollbar.active {
    background-color: rgba(100, 100, 100, 0.8);
    opacity: 1;
}

.uix-scrollbar.y {
    right: 0px;
    top: 0px;
    width: var(--width);
    height: 100px;
}

.uix-scrollbar.x {
    right: 0px;
    bottom: 0px;
    height: var(--width);
    width: 100px;
}