@import 'npm:showcar-ui/src/01-settings/variables.scss';
@import 'npm:showcar-ui/src/legacy-mixins.scss';

as24-autocomplete {
    position: relative;
    display: block;
}

.as24-autocomplete {

    &__input{
        transition: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &::-ms-clear {
        	  display: none;
        }

        &::placeholder {
            color: $black-100;
            opacity: 1;
        }

        &[disabled] {
            &::placeholder {
                color: $black-40;
            }
        }

        &[type="number"] {
            appearance: textfield;

            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                display: none;
            }
        }
    }

    &--disabled {
        cursor: not-allowed;
        .as24-autocomplete {
            &__icon-wrapper {
                cursor: not-allowed;
            }
        }
        svg {
            path {
                fill: $black-40;
            }
        }
    }

    &--active {
        .as24-autocomplete {
            &__input {
              border-bottom: 0;
              border-bottom-left-radius: 0;
              border-bottom-right-radius: 0;
            }
        }

        .as24-autocomplete__input-wrapper::after {
            content: '';
            position: absolute;
            bottom: 0;
            top: 0;
            left: 2px;
            right: 2px;
            border-bottom: 1px solid $black-40;
        }
    }

    &--user-input {
        .as24-autocomplete {
            &__icon-dropdown {
                display: none;
            }
            &__icon-cross {
                display: block;
            }
        }
    }

    &__input {
        box-sizing: border-box;

        &:focus:enabled {
            box-shadow: inset 1px 1px $blue-80, inset -1px 0 $blue-80;
        }

        &:focus:enabled + ul {
            border-top-width: 0;
        }

        @include input();
        @extend %customInputStyles;
    }

    &__hidden {
        visibility: hidden;
        position: absolute;
        z-index: -1;
    }

    &__icon-wrapper {
        position: absolute;
        width: 2rem;
        height: 2rem;
        right: 4px;
        top: 50%;
        margin-top: 0;
        cursor: pointer;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: space-around;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
    }

    &__icon-dropdown,
    &__icon-cross {
        &__icon {
            fill: $black-60;
            width: 10px;
        }
    }

    &__icon-cross {
        fill: #949494;
        display: none;
    }

    &__list {
        box-sizing: border-box;
        background: $white;
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
        border: solid 1px $black-60;
        border-top-width: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        max-height: 12rem;
        z-index: 1;
        width: 100%;
        position: absolute;

        &--visible {
            display: block;
            border-top: none;
            border-left: 2px solid $blue-80;
            border-right: 2px solid $blue-80;
            border-bottom: 2px solid $blue-80;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }
    }

    &__list-item {
        padding: $XS $M;
        user-select: none;

        &--preselected {
            background: $black-30;
        }

        &--selected {
            background: $black-30;
        }

        &--empty {
            color: $color-error;
            background: $white;
        }

        strong {
            font-weight: bold;
        }
    }

    &__separator {
        padding: $XS $M;
        user-select: none;
        font-size: $M;
        font-weight: normal;
        background-color: $black-20;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding-top: 16px;
    }
}