@sizes: 16;

.generate-space(@direction, @i: 0) when (@i =< @sizes) {
    .generate-space(@direction, @i + 1);

    &_@{direction}-@{i}&_@{direction}-@{i} {
        & when (@direction = all) {
            margin: 0.25rem * @i;
        }

        & when (@direction = top) {
            margin-block-start: 0.25rem * @i;
        }

        & when (@direction = bottom) {
            margin-block-end: 0.25rem * @i;
        }

        & when (@direction = vertical) {
            margin-block-start: 0.25rem * @i;
            margin-block-end: 0.25rem * @i;
        }

        & when (@direction = left) {
            margin-inline-start: 0.25rem * @i;
        }

        & when (@direction = right) {
            margin-inline-end: 0.25rem * @i;
        }

        & when (@direction = horizontal) {
            margin-inline-end: 0.25rem * @i;
            margin-inline-start: 0.25rem * @i;
        }
    }
}

.tui-space {
    .generate-space(all);
    .generate-space(top);
    .generate-space(bottom);
    .generate-space(vertical);
    .generate-space(left);
    .generate-space(right);
    .generate-space(horizontal);

    &_auto {
        margin-inline-start: auto;
        margin-inline-end: auto;
    }
}