scss-library/components/02_Styles/spacing/_spacing.scss

@use "sass:meta";

@mixin RV-Spacing__Outer--small {
    margin: $-spacing-small;
}

@mixin RV-Spacing__Outer--medium {
    margin: $-spacing-medium;
}

@mixin RV-Spacing__Outer--large {
    margin: $-spacing-large;
}

@mixin _flexrow_breakpoint_min_width($-gap) {

    @include RV-Utils__Hook--catch {
        $-breakpoint: get-hook-value('breakPoint');

        @include RV-Utils__ElementAmount using($-index) {
            min-width: calc((#{$-breakpoint} - (#{$-gap} * (#{$-index} - 1))) / #{$-index} - (2 * #{$-gap}));

            * {
                min-width: initial;
            }
        }
    }
}

@mixin _flexgrid_masonry_column_gap($-gap) {

    @include RV-Utils__Hook--catch {
        * {
            margin: $-gap/2 0;
        }
    }
}


@mixin RV-Spacing__Inner--small() {
    padding: $-spacing-small;
    gap: $-spacing-small;
    column-gap: $-spacing-small;

    @include _flexrow_breakpoint_min_width($-spacing-small);
    @include _flexgrid_masonry_column_gap($-spacing-small);
}

@mixin RV-Spacing__Inner--medium() {
    padding: $-spacing-medium;
    gap: $-spacing-medium;
    column-gap: $-spacing-medium;

    @include _flexrow_breakpoint_min_width($-spacing-medium);
    @include _flexgrid_masonry_column_gap($-spacing-medium);
}

@mixin RV-Spacing__Inner--large() {
    padding: $-spacing-large;
    gap: $-spacing-large;
    column-gap: $-spacing-large;

    @include _flexrow_breakpoint_min_width($-spacing-large);
    @include _flexgrid_masonry_column_gap($-spacing-medium);
}

@mixin RV-Spacing {
    &__Outer {
        &--small {
            @include RV-Spacing__Outer--small;
        }

        &--medium {
            @include RV-Spacing__Outer--medium;
        }

        &--large {
            @include RV-Spacing__Outer--large;
        }
    }

    &__Inner {
        &--small {
            @include RV-Spacing__Inner--small;
        }

        &--medium {
            @include RV-Spacing__Inner--medium;
        }

        &--large {
            @include RV-Spacing__Inner--large;
        }
    }
}

.RV-Spacing {
    @include RV-Spacing;
}