@use 'sass:math';
@use '../../variables' as *;

$b: '.suggest-input';

#{$b} {
    position: relative;

    &__input {
        position: relative;

        &_active {
            z-index: 11;
        }
    }

    &__loader {
        border-bottom-right-radius: $input-radius;
        border-top-right-radius: $input-radius;
        container-type: size;
        height: $input-height - $input-border-width * 2;
        padding: math.div($input-height - 4px * 5, 2);
        position: absolute;
        right: $input-border-width;
        top: $input-border-width;
        width: $input-height - $input-border-width * 2;
        z-index: 11;

        .input_small ~ & {
            height: $input-small-height - $input-border-width * 2;
            padding: math.div($input-small-height - 4px * 4, 2);
            width: $input-small-height - $input-border-width * 2;
        }
    }

    &__clear {
        align-items: center;
        background-color: $input-bg;
        border-bottom-right-radius: $input-radius;
        border-top-right-radius: $input-radius;
        color: $suggest-input-clear-color;
        cursor: pointer;
        display: flex;
        height: $input-height - $input-border-width * 2;
        justify-content: center;
        position: absolute;
        right: 1px;
        top: 1px;
        transition-duration: var(--duration-micro-s);
        transition-property: color;
        transition-timing-function: var(--easing-standard);
        width: $input-height - $input-border-width * 2;
        z-index: 11;

        &:hover,
        &:focus-visible {
            color: $suggest-input-clear-active-color;
        }

        .input_small ~ & {
            height: $input-small-height - $input-border-width * 2;
            width: $input-small-height - $input-border-width * 2;
        }
    }

    &__clear-icon {
        fill: currentcolor;
        height: 4px * 4;
        width: 4px * 4;

        .input_small ~ #{$b}__clear & {
            height: 4px * 3;
            width: 4px * 3;
        }
    }

    &__list {
        background-color: $suggest-input-list-bg;
        border-bottom-left-radius: $suggest-input-list-radius;
        border-bottom-right-radius: $suggest-input-list-radius;
        box-shadow: $suggest-input-list-shadow;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        position: absolute;
        top: $input-height;
        width: 100%;
        z-index: 10;

        @include dark-border($width: 1px);
        @include dark-border-disable((top));

        @if $input-radius != 0 {
            margin-top: -4px * 2;
            max-height: $suggest-input-item-height * 5 + 4px * 2;
            padding-top: 4px * 2;
        } @else {
            max-height: $suggest-input-item-height * 5;
        }

        .input_small ~ & {
            top: $input-small-height;
        }
    }

    &__list-item {
        align-items: center;
        color: $suggest-input-item-color;
        cursor: pointer;
        display: flex;
        min-height: $suggest-input-item-height;
        padding: 4px $input-padding-x;
        transition-duration: var(--duration-micro-s);
        transition-property: background-color, color;
        transition-timing-function: var(--easing-standard);

        @include font($suggest-input-item-font);

        &_focus,
        &:hover {
            background-color: $suggest-input-item-active-bg;
            color: $suggest-input-item-active-color;
        }

        mark {
            background-color: transparent;
            color: $suggest-input-item-mark-color;

            @include font($suggest-input-item-mark-font);
        }
    }

    &__not-found {
        align-items: center;
        color: $suggest-input-not-found-color;
        display: flex;
        min-height: $suggest-input-item-height;
        padding: 4px $input-padding-x;

        @include font($suggest-input-not-found-font);
    }
}