@import '../../common/styles/colors';
@import '../../common/styles/media/_screen';
@import '../../common/styles/text-base';

@bloko-drop-arrow-size: 5px;
@bloko-drop-arrow-border: @bloko-drop-arrow-size + 1px;

@bloko-drop-padding-left: 20px;
@bloko-drop-padding-right: 15px;
@bloko-drop-padding-top: 15px;
@bloko-drop-padding-bottom: 15px;

@bloko-drop-dark-color: @color-gray-80;
@bloko-drop-light-color: @color-white;
@bloko-drop-attention-color: @color-red-60;
@bloko-drop-bright-color: @color-blue-60;
@bloko-drop-info-color: @color-green-60;
@bloko-drop-neural-color: @color-violet-60;
@bloko-drop-line-height: @_line-height-medium;

@bloko-drop-menu-max-width: 310px;
@bloko-drop-menu-wrapper-padding: 5px;

.bloko-drop-arrow() {
    position: absolute;
    display: block;
    border-style: solid;
    border-color: transparent;
    content: '';
    pointer-events: none;
}

.bloko-drop-top-arrow(@border, @color) {
    border-width: @border @border 0 @border;
    margin-left: -@border;
    border-top-color: @color;
}

.bloko-drop-left-arrow(@border, @color) {
    border-width: @border 0 @border @border;
    margin-top: -@border;
    border-left-color: @color;
}

.bloko-drop-right-arrow(@border, @color) {
    border-width: @border @border @border 0;
    margin-left: -@border;
    margin-top: -@border;
    border-right-color: @color;
}

.bloko-drop-bottom-arrow(@border, @color) {
    border-width: 0 @border @border @border;
    margin-top: -@border;
    margin-left: -@border;
    border-bottom-color: @color;
}

.bloko-drop-arrow-mixin() {
    &.bloko-drop_top .bloko-drop__arrow::after {
        .bloko-drop-top-arrow(@bloko-drop-arrow-border, inherit);

        filter: drop-shadow(0 2px 2px fade(@color-gray-80, 10%));
    }

    &.bloko-drop_bottom .bloko-drop__arrow::after {
        .bloko-drop-bottom-arrow(@bloko-drop-arrow-border, inherit);

        filter: drop-shadow(0 -2px 2px fade(@color-gray-80, 10%));
    }

    &.bloko-drop_left .bloko-drop__arrow::after {
        .bloko-drop-left-arrow(@bloko-drop-arrow-border, inherit);

        filter: drop-shadow(2px 0 2px fade(@color-gray-80, 10%));
    }

    &.bloko-drop_right .bloko-drop__arrow::after {
        .bloko-drop-right-arrow(@bloko-drop-arrow-border, inherit);

        filter: drop-shadow(-2px 0 2px fade(@color-gray-80, 10%));
    }
}

.bloko-drop-menu-item-mixin() {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    line-height: @bloko-drop-line-height;
    display: flex;
    padding: 10px 20px;
    text-decoration: none;
    color: @color-gray-80;
    position: relative;

    @media @screen-lt-m {
        :global(.s-friendly) & {
            padding: 11px 20px;
        }
    }

    @media @screen-lt-s {
        :global(.xs-friendly) & {
            padding: 11px 15px;
        }
    }
}