@import '../../common/styles/_layers';
@import '../../common/styles/colors';
@import '../../common/styles/color-utils';
@import '../../common/styles/media/_screen';
@import '../../common/styles/rounded-corner-base';
@import 'variables';

.suggest {
    position: absolute;
    top: 0;
    left: 0;

    box-sizing: border-box;

    border: 1px solid @color-gray-30;
    border-top: 0;
    border-radius: @rounded-corner-default;

    margin-top: 4px;
    background: @color-white;
    box-shadow: 0 2px 5px 0 fade(@color-gray-80, 17%);

    overflow-y: auto;

    @media @screen-lt-s {
        border-left: 0;
        border-right: 0;
    }

    .layers();
}

.suggest__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.suggest__text-hint {
    color: @color-gray-50;
}

.suggest__item {
    margin: 0;
    padding: @suggest-item-padding;
    cursor: pointer;
}

/* stylelint-disable selector-class-pattern */
.suggest__items_hover_enabled .suggest__item:hover,
.suggest__item:active,
.suggest__item_state_highlighted {
    .color-highlight();

    .suggest__text-hint {
        color: @color-white;
    }
}
/* stylelint-enable */