@import "./functions/func.scss";

$headerHeight: 26px;
$caretWidth: 26px;
$dropItemHeight: 30px;
$scrollBarSize: 4px;

$searchBarHeight: 36px;
$searchInputHeight: 26px;
$searchIconSize: 13px;
$listMaxHeight: 210px;

.ui-drop-wrapper {
    display: inline-block;
    border: none;
    border-radius: unset;
    user-select: none;
    position: relative;
    font-size: var(--font-size);
    font-family: var(--font-family);

    > .ui-drop-header {
        background-color: var(--bg-color);
        display: flex;
        height: $headerHeight;

        @include outborder();

        > .ui-drop-text {
            flex: 1 1 auto;
            cursor: pointer;
            font-size: var(--font-size);
            line-height: $headerHeight;
            min-height: $headerHeight;
            padding: 0 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            border: none;
            white-space: nowrap;

            @include outline();
        }

        > .ui-drop-text::before {
            content: '';
            display: inline-block;
        }

        > input.ui-drop-text {
            cursor: initial;

            &::placeholder {
                font-size: var(--font-smaller-size);
                font-style: italic;
            }
        }

        > .ui-drop-caret {
            flex: 0 0 auto;
            width: $caretWidth;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            &::after {
                display: block;
                content: '';
                border-top: 4px solid;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                height: 0;
                width: 0;
            }
        }

        &.disabled {
            border-color: var(--disabled-border-color);
            background-color: var(--disabled-bg-color);
            color: var(--disabled-color);

            &:focus {
                border-color: var(--disabled-border-color);
                // box-shadow: none;
            }

            > .ui-drop-text,
            > .ui-drop-caret {
                cursor: default;
            }
        }
    }
}

.ui-drop-box {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    background-color: var(--bg-color);
    top: calc($headerHeight + 2px);
    z-index: 2;
    transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
    min-width: calc(100% + 2px);
    box-sizing: border-box;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
    left: -1px;

    &.slide-up {
        /*border-top-width: 1px;
        border-bottom-width: 0;*/
        transform-origin: bottom;
        top: unset;
        bottom: calc($headerHeight + 2px);
    }

    &.active {
        visibility: visible;
        opacity: 1;
        transform: scaleY(1);
    }

    > .ui-drop-search {
        box-sizing: border-box;
        height: $searchBarHeight;
        line-height: $searchBarHeight;
        padding: 0 8px;
        position: relative;
        display: flex;
        align-items: center;

        > input[type="text"] {
            box-sizing: border-box;
            width: 100%;
            height: $searchInputHeight;
            padding: 0 6px 0 22px;
            color: var(--color);

            @include outborder();
            // &:focus {
            //     box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
            // }

            &::placeholder {
                font-style: italic;
            }
        }

        > svg {
            position: absolute;
            left: 14px;
            width: $searchIconSize;
            height: 100%;
            cursor: text;
        }
    }

    > .ui-drop-list {
        max-height: $listMaxHeight;
        overflow-y: auto;
        position: relative;
        font-size: var(--font-size);
        @include scrollbar();

        &.filtered > .drop-content > .li:first-child {
            background-color: var(--hover-bg-color);
        }

        > .drop-content {
            position: absolute;
            width: 100%;
        }

        li {
            // display: flex;
            // align-items: center;
            list-style: none;
            line-height: $dropItemHeight;
            height: $dropItemHeight;
            padding: 0 10px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            &:hover,
            &.selected {
                background-color: var(--hover-bg-color);
            }

            > .li-wrapper {
                display: flex;
                align-items: center;

                > .ui-expandor {
                    width: 12px;
                    height: 12px;
                    display: flex;
                    opacity: 0;

                    &.active {
                        opacity: 1;
                    }
                }

                > .ui-check-wrapper {
                    height: $dropItemHeight;
                    display: flex;
                }
            }
        }
    }
}
