@import '../../common/styles/_abstract-select';
@import '../../common/styles/media/_screen';
@import '../../common/styles/colors';
@import '../../common/styles/color-utils';

.bloko-select-dropdown-option {
    position: relative;
    display: block;
    padding: @option-padding;
    line-height: normal;
    user-select: none;
    word-wrap: break-word;
    cursor: pointer;
    box-sizing: border-box;
    min-height: @option-min-height;

    &:not(.bloko-select-dropdown-option_disabled) {
        &,
        &:visited,
        &:focus {
            color: @color-gray-80;
            text-decoration: none;
            outline: none;
            background: transparent;
        }
    }

    @media @screen-lt-s {
        .bloko-drop_fullscreen-on-xs & {
            padding: 12px 20px 12px 46px;
        }
    }
}

.bloko-select-dropdown-option_selected::before {
    display: inline-block;
    position: absolute;
    content: '';
    top: 12px;
    left: 13px;
    width: 11px;
    height: 10px;
    background-image: url('selectDropdownOptionCheck.svg');
    background-repeat: no-repeat;
    background-position: 0 0;

    @media @screen-lt-s {
        .bloko-drop_fullscreen-on-xs & {
            left: 22px;
            top: 15px;
        }
    }
}

.bloko-select-dropdown-option_focusable-by-hover:hover,
.bloko-select-dropdown-option:active,
.bloko-select-dropdown-option_focused {
    &:not(.bloko-select-dropdown-option_disabled) {
        text-decoration: none;

        &,
        .bloko-select-dropdown-option__text {
            .color-highlight();
        }
    }
}

/* opacity не используем мобильный IE умирает при repaint */
.bloko-select-dropdown-option_disabled {
    cursor: default;
    color: @color-gray-50;
}

.bloko-select-dropdown-option_focused.bloko-select-dropdown-option_selected::before {
    background-position: -18px 0;
}