@import '../../../common/styles/colors';
@import '../../../common/styles/drop';
@import '../drop';

@bloko-drop-tip-border-color: @color-white;

.bloko-drop_tip {
    padding: 8px 14px;
    min-width: 50px;
    max-width: 260px;
    font-weight: normal;
    border: 1px solid @bloko-drop-tip-border-color;

    .bloko-drop__arrow::after {
        .bloko-drop-arrow();
    }

    .bloko-drop__arrow::before {
        .bloko-drop-arrow();
    }
}

.bloko-drop_tip.bloko-drop_top .bloko-drop__arrow::after {
    .bloko-drop-top-arrow(@bloko-drop-arrow-size, inherit);
}

.bloko-drop_tip.bloko-drop_top .bloko-drop__arrow::before {
    .bloko-drop-top-arrow(@bloko-drop-arrow-border, @bloko-drop-tip-border-color);
}

.bloko-drop_tip.bloko-drop_bottom .bloko-drop__arrow::after {
    .bloko-drop-bottom-arrow(@bloko-drop-arrow-size, inherit);
}

.bloko-drop_tip.bloko-drop_bottom .bloko-drop__arrow::before {
    .bloko-drop-bottom-arrow(@bloko-drop-arrow-border, @bloko-drop-tip-border-color);
}

.bloko-drop_tip.bloko-drop_left .bloko-drop__arrow::after {
    .bloko-drop-left-arrow(@bloko-drop-arrow-size, inherit);
}

.bloko-drop_tip.bloko-drop_left .bloko-drop__arrow::before {
    .bloko-drop-left-arrow(@bloko-drop-arrow-border, @bloko-drop-tip-border-color);
}

.bloko-drop_tip.bloko-drop_right .bloko-drop__arrow::after {
    .bloko-drop-right-arrow(@bloko-drop-arrow-size, inherit);
}

.bloko-drop_tip.bloko-drop_right .bloko-drop__arrow::before {
    .bloko-drop-right-arrow(@bloko-drop-arrow-border, @bloko-drop-tip-border-color);
}