_classes.scss

@use "sass:math";

.#{$sfg-prefix}row-span, .#{$sfg-prefix}row {
	@include row();

	&.#{$sfg-prefix}reverse {
		@include row-reverse();
	}
}

.#{$sfg-prefix}col.#{$sfg-prefix}reverse {
  flex-direction: column-reverse;
}

@each $label, $map in $sfg-breakpoints {
  @include mq(map-get($map, min-width)) {
    .#{$sfg-prefix}row {
			@include row-gutter(map-get($map, gutter));

			&.no-gutter {
				margin-right: 0;
				margin-left: 0;
			}
		}

		[class^='#{$sfg-prefix}col-'], [class*='#{$sfg-prefix}col-'] {
			@include col-gutter(map-get($map, gutter));

			.no-gutter & {
				padding-right: 0;
				padding-left: 0;
			}
		}

		.#{$sfg-prefix}col-#{map-get($map, name)} {
			flex-grow: 1;
			flex-basis: 0;
			max-width: 100%;
			box-sizing: border-box;
			box-flex: 0;
		}

    @for $i from 1 through map-get($map, columns) {
      .#{$sfg-prefix}col-#{map-get($map, name)}-#{$i} {
				@include col(math.div($i, map-get($map, columns)), map-get($map, gutter));
      }

      .#{$sfg-prefix}col-#{map-get($map, name)}-offset-#{$i} {
				@include offset(math.div($i, map-get($map, columns)));
      }
    }

    .#{$sfg-prefix}start-#{map-get($map, name)} {
			@include start();
    }

    .#{$sfg-prefix}center-#{map-get($map, name)} {
      @include center();
    }

    .#{$sfg-prefix}end-#{map-get($map, name)} {
      @include end();
    }

    .#{$sfg-prefix}top-#{map-get($map, name)} {
      @include top();
    }

    .#{$sfg-prefix}middle-#{map-get($map, name)} {
      @include middle();
    }

    .#{$sfg-prefix}bottom-#{map-get($map, name)} {
      @include bottom();
    }

    .#{$sfg-prefix}around-#{map-get($map, name)} {
      @include around();
    }

    .#{$sfg-prefix}between-#{map-get($map, name)} {
      @include between();
    }

    .#{$sfg-prefix}first-#{map-get($map, name)} {
			@include first();
    }

    .#{$sfg-prefix}last-#{map-get($map, name)} {
      @include last();
    }
  }
}