@space-small: 0.5rem;
@space-normal: 1.25rem;
@space-large: 1.5rem;

.generate-columns(@infix, @n, @padding, @i: 1) when (@i =< @n) {
    &_@{infix}-@{i} {
        inline-size: (@i * 100% / @n);
        padding-inline-start: @padding;
        padding-inline-end: @padding;
        box-sizing: border-box;
    }

    .generate-columns(@infix, @n, @padding, (@i + 1));
}

.generate-offset-columns(@infix, @n, @i: 1) when (@i =< @n) {
    &_@{infix}-@{i} {
        margin-inline-start: (@i * 100% / @n);
    }

    .generate-offset-columns(@infix, @n, (@i + 1));
}

.generate-sme-columns(@n, @padding, @i: 1) when (@i =< @n) {
    &_@{i} {
        inline-size: (@i * 100% / @n);
        padding-inline-start: @padding;
        padding-inline-end: @padding;
        box-sizing: border-box;
    }

    .generate-sme-columns(@n, @padding, (@i + 1));
}

.generate-sme-offset-columns(@n, @i: 1) when (@i =< @n) {
    &_@{i} {
        margin-inline-start: (@i * 100% / @n);
    }

    .generate-sme-offset-columns(@n, (@i + 1));
}

.tui-row {
    display: flex;
    flex-wrap: wrap;

    &_align_center {
        align-items: center;
    }

    &_align_start {
        align-items: flex-start;
    }

    &_align_end {
        align-items: flex-end;
    }

    &_adaptive.tui-row {
        @media @tui-desktop-lg-min {
            margin-inline-start: -@space-large;
            margin-inline-end: -@space-large;
        }

        @media @tui-desktop {
            margin-inline-start: -@space-normal;
            margin-inline-end: -@space-normal;
        }

        @media @tui-mobile {
            margin-inline-start: -@space-small;
            margin-inline-end: -@space-small;
        }
    }

    &_temporary.tui-row {
        margin-inline-start: -@space-normal;
        margin-inline-end: -@space-normal;
    }

    @media @tui-desktop-lg-min {
        margin-inline-start: -@space-large;
        margin-inline-end: -@space-large;
    }

    @media @tui-desktop {
        margin-inline-start: -@space-normal;
        margin-inline-end: -@space-normal;
    }
}

.tui-col {
    .generate-sme-columns(12, @space-normal);
    .generate-columns(md, 12, @space-normal);

    &_stretch {
        display: flex;
    }

    .tui-row_adaptive & {
        @media @tui-desktop-lg-min {
            .generate-columns(lg, 12, @space-large);
        }

        @media @tui-desktop {
            .generate-columns(md, 12, @space-normal);
        }

        @media @tui-mobile {
            .generate-columns(xs, 12, @space-small);
        }
    }

    .tui-row_temporary & {
        .generate-sme-columns(12, @space-normal);
    }

    @media @tui-desktop-lg-min {
        .generate-sme-columns(12, @space-large);
    }
}

.tui-col-offset {
    .generate-sme-offset-columns(12);

    @media @tui-mobile-interval {
        .generate-offset-columns(xs, 12);
    }

    @media @tui-desktop {
        .generate-offset-columns(md, 12);
    }

    @media @tui-desktop-lg-min {
        .generate-offset-columns(lg, 12);
    }
}