@import 'colors';
@import '_highlight-indent';

/* stylelint-disable hhru/less-variable-value-disallowed-list */
@color-static-spacing-indent: #ffe7cc;
@color-dynamic-spacing-indent: #e2ffcc;
/* stylelint-enable */

@spacing-base: 4px;

.highlight-spacing() {
    .bloko-highlight-indents & {
        &::before {
            top: 50%;
            position: relative;
            display: block;
            .indentation-text-properties();
        }
    }
}

.highlight-spacing-color(@color) {
    .bloko-highlight-indents & {
        background-color: @color;
    }
}

.highlight-spacing-name(@name) {
    .bloko-highlight-indents & {
        &::before {
            content: @name;
        }
    }
}

._v-spacing(@count, @i: 0) when (@i =< @count) {
    .bloko-v-spacing_base-@{i} {
        height: @spacing-base * @i;
        .highlight-spacing-color(@color-static-spacing-indent);
        .highlight-spacing-name('v-spacing_base-@{i}');
    }

    ._v-spacing(@count, @i + 1);
}

._v-spacing-override(@name, @breakpoint, @count, @i: 0) when (@i =< @count) {
    .bloko-v-spacing_@{name}-@{i} {
        .highlight-spacing-color(@color-dynamic-spacing-indent);

        @media @breakpoint {
            height: @spacing-base * @i;
            .highlight-spacing-name('v-spacing_@{name}-@{i}');
        }
    }

    ._v-spacing-override(@name, @breakpoint, @count, @i + 1);
}

._h-spacing(@count, @i: 0) when (@i =< @count) {
    .bloko-h-spacing_base-@{i} {
        width: @spacing-base * @i;
        .highlight-spacing-color(@color-static-spacing-indent);
    }

    ._h-spacing(@count, @i + 1);
}

._spacing-container(@type, @count, @i: 0) when (@i =< @count) {
    .bloko-@{type}-spacing-container_base-@{i} {
        gap: @spacing-base * @i;
    }

    ._spacing-container(@type, @count, @i + 1);
}

._v-spacing-container-override(@name, @breakpoint, @count, @i: 0) when (@i =< @count) {
    .bloko-v-spacing-container_@{name}-@{i} {
        @media @breakpoint {
            gap: @spacing-base * @i;
        }
    }

    ._v-spacing-container-override(@name, @breakpoint, @count, @i + 1);
}