@import "./base/option.scss";

.os-dropdown {
    width: 100%;
    height: 21px;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 11px;
    padding: 3px 4px;
    border: 1px solid #7f9db9;
    background-color: #ffffff;
    box-sizing: border-box;
    appearance: none;
    border-radius: 0;
    appearance: none;
    padding-right: 32px;
    border-radius: 0;
    cursor: default;
    user-select: none;

    &::after {
        width: 15px;
        height: 17px;
        position: absolute;
        top: 1px;
        right: 1px;
        content: '';
        background-image: url("/assets/themes/winXP/icons/dropdown.png");
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-color: rgb(var(--os-primary-color));
    }

    &:focus {
        outline: none;
        color: #ffffff;
        background-color: #2267cb;
        box-shadow: inset 2px 2px white, inset -2px -2px white;

        option {
            color: #000;
            background-color: #fff;
        }
    }

    &:not(.os-disabled) {
        &:hover::after {
            background-position: 0px -17px;
        }

        &:active::after {
            background-position: 0px -34px;
        }
    }

    &.os-disabled {
        background-color: #ece9d8;
        border: solid 1px rgba(0, 0, 0, .2);
        color: #aca899;

        &::after {
            background-position: 0px -51px;
            background-color: transparent;
        }
    }

    .os-placeholder, .os-value {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
}

.os-dropdown-item {
    @include os-base-option;
}

.os-list.os-part-of-dropdown {
    position: absolute;
    z-index: 999;
    opacity: .999;
    left: -1px;
    top: 100%;
}
