@import '../../styles/variables.less';

:host {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    user-select: none;
    outline: none;
    & * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    & div.container {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-x: auto;
        overflow-y: hidden;
        &::-webkit-scrollbar:horizontal {
            background-color: var(--scheme-color-5-15);
            transition: background 250ms;
        }
        &::-webkit-scrollbar-thumb:horizontal {
            background-color: var(--scheme-color-3-15);
            transition: background 250ms;
        }
        &:hover {
            &::-webkit-scrollbar:horizontal {
                background-color: var(--scheme-color-5);
            }
            &::-webkit-scrollbar-thumb:horizontal {
                background-color: var(--scheme-color-3);
            }
        }
    }
    & ul.holder {
        position: absolute;
        display: block;
        width: auto;
        list-style: none;
        padding: 0 0 16px 0;
        margin: 0;
        top: 0;
        bottom: 0;
        left: 0;
        user-select: none;
        min-width: 100%;
        & li {
            display: block;
            position: relative;
            width: auto;
            min-width: 100%;
            list-style: none;
            padding: 0;
            margin: 0;
            user-select: text;
        }
        & li[data-on-border="true"] {
            &::after {
                display: block;
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                width: 100%;
                border-top: thin dashed;
                border-top-color: var(--scheme-color-accent);
            }
        }
    }
    & .selection-detector {
        position: absolute;
        z-index: 1000;
        width: 10000px;
        height: 0px;
        left: 0;
        & .selection-detector-filler {
            position: fixed;
            width: 10000px;
            height: 50px;
        }
        &.top {
            top: 0;
            & .selection-detector-filler {
                position: fixed;
                height: 1000px;
                margin-top: -1000px;
            }
        }
        &.bottom {
            bottom: 8px;
            & .selection-detector-filler {
                position: fixed;
                height: 10000px;
            }
        }
    }
}
