@import '../../common/styles/_abstract-select';
@import '../../common/styles/_abstract-control';
@import '../../common/styles/_abstract-control-text';
@import '../../common/styles/_layers';
@import '../../common/styles/media/_screen';
@import '../../common/styles/colors';
@import '../selectDropdownOption/selectDropdownOption';
@import '../select/select';

/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:local(.bloko-custom-select) {
    /* stylelint-disable-next-line property-no-unknown */
    composes: bloko-custom-select from '../controlGroup/controlGroup.less';
}

.bloko-custom-select {
    position: relative;
    display: block;
    height: @control-height-scale-medium;
}

.bloko-custom-select_light {
    .bloko-custom-select__select {
        .select-light();
    }

    .bloko-custom-select__select_focus {
        box-shadow: none;
    }

    .bloko-custom-select__placeholder {
        line-height: @control-height-scale-medium;
    }

    &.bloko-custom-select_disabled .bloko-custom-select__select {
        .select-light-disabled();
    }

    &.bloko-custom-select_invalid .bloko-custom-select__select {
        .select-light-invalid();
    }
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:local(.bloko-custom-select_invalid) {
    /* stylelint-disable-next-line property-no-unknown */
    composes: bloko-custom-select_invalid from '../controlGroup/controlGroup.less';
}

.bloko-custom-select_invalid,
.bloko-custom-select_invalid:hover {
    .bloko-custom-select__select {
        border-color: @control-border-color-invalid;
        box-shadow: none;
    }
}

.bloko-custom-select_disabled {
    .bloko-custom-select__select,
    .bloko-custom-select__select:hover,
    .bloko-custom-select__select:focus,
    .bloko-custom-select__select:active {
        background-color: @control-background-color-complementary;
        border-color: @control-border-color;
        opacity: @control-opacity-disabled;
        box-shadow: none;
        cursor: default;
    }
}

.bloko-custom-select_flexible {
    .bloko-custom-select__select {
        width: auto;
    }
}

.bloko-custom-select:global(.focus-visible) .bloko-custom-select__select {
    .abstract-control-focus-visible();
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:local(.bloko-custom-select__select) {
    /* stylelint-disable-next-line property-no-unknown */
    composes: bloko-custom-select__select from '../controlGroup/controlGroup.less';
}

.bloko-custom-select__select {
    .abstract-select();
}

.bloko-custom-select__select_focus {
    border-color: @control-border-color-focus;
    outline: none;
}

.bloko-custom-select__select_focus:hover {
    border-color: @control-border-color-focus;
}

.bloko-custom-select__placeholder {
    @height: @control-height-scale-medium - 2 * @control-border-width;

    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: @height;
    line-height: @height;
    user-select: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bloko-custom-select__placeholder_empty {
    color: @control-placeholder-color;
}

.bloko-custom-select__search {
    padding: 15px 10px;

    @media @screen-lt-s {
        position: sticky;
        top: 0;
        z-index: 1;
        background: @color-white;
        padding: 20px;
        padding-bottom: 10px;
    }
}

.bloko-custom-select__search_with-title {
    @media @screen-lt-s {
        top: 61px;
        padding-top: 10px;
    }
}

.bloko-custom-select__after-options {
    background: @color-white;

    @media @screen-lt-s {
        position: sticky;
        bottom: 0;
        z-index: 1;
    }
}

.bloko-custom-select__content {
    position: absolute;
    display: block;
    min-width: 100%;
    left: 0;
    top: @control-height-scale-medium;
    background: @color-white;
    box-shadow: 0 2px 6px fade(@color-gray-80, 35%);
    .layers();
}

.bloko-custom-select__option-list {
    position: relative;
    overflow-y: auto;
    max-height: 300px;
    height: auto;

    @media @screen-lt-s {
        .bloko-drop_fullscreen-on-xs & {
            max-height: none;
        }
    }
}