@import '../../../common/styles/_abstract-links';
@import '../../../common/styles/colors';
@import '../../../common/styles/media/_screen';
@import '../../../common/styles/drop';

.bloko-drop-menu-item {
    .abstract-link();
    .abstract-link-focus-visible-inset();

    .bloko-drop-menu-item-mixin();

    cursor: pointer;

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

        &:first-child {
            margin-top: 10px;
        }

        &:last-child {
            margin-bottom: 20px;
        }
    }
}

.bloko-drop-menu-item:hover,
.bloko-drop-menu-item:focus,
.bloko-drop-menu-item:active {
    background-color: @color-gray-10;
    text-decoration: none;
    color: @color-gray-80;
}

.bloko-drop-menu-item_selectable {
    padding-left: 35px;

    :global(.xs-friendly) & {
        padding-left: 35px;
    }
}

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

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