@import 'colors';

.indentation-text-properties() {
    color: @color-gray-80;
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    font-size: 9px;
    font-weight: normal;
    line-height: 0;
    height: 0;
}

.add-description(@top, @bottom, @color, @name, @position) {
    &::before,
    &::after {
        display: flex;
        justify-content: @position;
        content: @name;
        .indentation-text-properties();
    }

    &::before {
        display: if((@top > 0), flex, none);
        transform: translate(0, if((@top > 0), -@top / 2, 0));
    }

    &::after {
        display: if((@bottom > 0), flex, none);
        transform: translate(0, if((@bottom > 0), @bottom / 2, 0));
    }
}

.highlight-paddings(@top, @bottom, @color, @name, @position: flex-end) {
    .bloko-highlight-indents & {
        /* stylelint-disable */
        box-shadow: inset 0 @top 0 0 @color, inset 0 -@bottom 0 0 @color;
        .add-description(@top, @bottom, @color, @name, @position);
    }
}

.highlight-margins(@top, @bottom, @color, @name, @position: flex-end) {
    .bloko-highlight-indents & {
        box-shadow: 0 -@top 0 0 @color, 0 @bottom 0 0 @color;
        .add-description(@top, @bottom, @color, @name, @position);
    }
}