@import '../styles/mixins';

.yc-select-control {
    $block: &;

    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-left: 8px;
    border: 1px solid var(--g-color-line-generic);
    border-radius: 3px;
    user-select: none;
    transition:
        border-color 0.1s linear,
        background-color 0.1s linear;
    cursor: pointer;
    outline: none;
    color: var(--g-color-text-primary);
    background-color: var(--yc-select-background-color, 'none');

    &_size {
        &_xs {
            height: 24px;
            line-height: 24px;
            font-size: 13px;
            border-radius: var(--g-border-radius-s);
        }

        &_s {
            height: 28px;
            line-height: 28px;
            font-size: 13px;
            border-radius: var(--g-border-radius-m);
        }

        &_m {
            height: 32px;
            line-height: 36px;
            font-size: 13px;
            border-radius: var(--g-border-radius-l);
        }

        &_n {
            height: 36px;
            line-height: 36px;
            font-size: 13px;
            border-radius: var(--g-border-radius-xl);
        }

        &_promo {
            height: 44px;
            line-height: 44px;
            font-size: 15px;

            padding-left: 12px;

            #{$block}__tokens-text {
                padding-right: 12px;
            }
        }
    }

    &_focused,
    &_focused#{&}:hover:not(#{&}_error),
    &:focus:not(#{&}_error) {
        border-color: var(--g-color-line-generic-active);
    }

    &_stretched {
        width: 100%;
        overflow: hidden;
    }

    &_disabled {
        color: var(--g-color-text-hint);
        pointer-events: none;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(
                --yc-select-background-color-disabled,
                var(--g-color-base-generic-accent-disabled)
            );
        }
    }

    &:hover {
        border-color: var(--g-color-line-generic-hover);
        background-color: var(--yc-select-background-color-hover, var(--g-color-base-simple-hover));
    }

    &:active:not(#{&}_without-animation) {
        transform: scale(0.98);
    }

    &_error {
        border-color: var(--g-color-line-danger);

        &:hover {
            border-color: var(--g-color-line-danger);
        }
    }

    &__label {
        @include text-accent;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 6px;
        white-space: nowrap;

        &_limited {
            max-width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }
    }

    &__tokens {
        display: flex;
        align-items: center;
        line-height: 26px;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
    }

    &__tokens-text {
        padding-right: 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        &_empty {
            color: var(--g-color-text-hint);
        }
    }

    &__placeholder-icon,
    &__selected-item-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }

    &__badge {
        display: flex;
        align-items: center;
        height: 20px;
        padding: 0 6px;
        background-color: var(--yc-select-badge-color, var(--g-color-base-selection));
        border-radius: 4px;
        transition: background-color 0.1s linear;

        &_clicked {
            background-color: var(--g-color-base-brand);
            color: var(--g-color-text-light-primary);
        }

        &_without-arrow {
            margin-right: 3px;
        }
    }

    &__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        height: 100%;

        &_loading {
            margin-left: auto;
        }
    }

    &__loader {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

.yc-select-action {
    padding: 0 2px 2px;
}

.yc-select-popup {
    max-width: 400px;
    overflow: hidden;
    color: var(--g-color-text-primary);

    &_multi {
        min-width: 150px;
    }

    &_search {
        min-width: 170px;
    }

    &_search#{&}_multi {
        min-width: 200px;
    }

    &__select-title {
        @include text-accent;
        padding: 12px 0 4px 16px;
    }

    &__loader {
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;

        &_mobile {
            padding: 35px;
        }
    }
}

.yc-select-sheet {
    --g-sheet-content-padding: 0;
    overflow: hidden;

    & .yc-sheet__sheet-content-title {
        padding-bottom: 0;
    }
}
