@use "sass:math";

@mixin generate-column-class($size) {
	@for $i from $sui-total-grid-cols through 1 {
		$width: percentage(math.div($i, $sui-total-grid-cols));
		.sui-col-#{$size}-#{$i} {
			width: $width;
			max-width: $width;
			flex-basis: $width;
		}
		.sui-col-#{$size}-offset-#{$i} {
			margin-left: $width;
		}
	}
}

@include body-class(true) {

	%column {
		min-height: 1px;
		padding-left: math.div($sui-gutter, 2);
		padding-right: math.div($sui-gutter, 2);
		position: relative;

		@include media( max-width, md ) {
			padding-left: math.div($sui-gutter-md, 2);
			padding-right: math.div($sui-gutter-md, 2);
		}
	}

	.sui-row {
		display: flex;
		flex-flow: wrap;
		margin-right: -#{math.div($sui-gutter, 2)};
		margin-bottom: $sui-gutter;
		margin-left: -#{math.div($sui-gutter, 2)};

		&:last-child {
			margin-bottom: 0;

			@include media( max-width, md ) {
				margin-bottom: 0;
			}
		}

		@include media( max-width, md ) {
			margin-right: -#{math.div($sui-gutter-md, 2)};
			margin-bottom: $sui-gutter-md;
			margin-left: -#{math.div($sui-gutter-md, 2)};
		}
	}

	.sui-reverse {
		flex-direction: row-reverse;
	}

	.sui-col {
		@extend %column;
		flex: 1;
	}

	[class*="sui-col-"] {
		@extend %column;
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
	}

	@for $i from 1 through length($sui-breakpoints) {
		$size: nth(nth($sui-breakpoints, $i), 1);
		$screen-width: nth(nth($sui-breakpoints, $i), 2);
		@if ($i == 1) {
			@include generate-column-class($size);
		}
		@media (min-width: $screen-width) {
			@include generate-column-class($size);
		}
	}

	[class*="sui-col-lg-"] {

		&:last-child {

			@media (max-width: map-get($sui-breakpoints, 'lg')) {
				margin-bottom: 0;
			}
		}

		@media (max-width: map-get($sui-breakpoints, 'lg')) {
			margin-bottom: $sui-gutter;
		}

		@media (max-width: map-get($sui-breakpoints, 'md')) {
			margin-bottom: $sui-gutter-md;
		}
	}

	[class*="sui-col-md-"] {

		&:last-child {

			@media (max-width: map-get($sui-breakpoints, 'md')) {
				margin-bottom: 0;
			}
		}

		@media (max-width: map-get($sui-breakpoints, 'md')) {
			margin-bottom: $sui-gutter-md;
		}
	}

	[class*="sui-col-sm-"] {

		&:last-child {

			@media (max-width: map-get($sui-breakpoints, 'sm')) {
				margin-bottom: 0;
			}
		}

		@media (max-width: map-get($sui-breakpoints, 'sm')) {
			margin-bottom: $sui-gutter-md;
		}
	}

	[class*="sui-col-xs-"] {

		&:last-child {

			@media (max-width: map-get($sui-breakpoints, 'xs')) {
				margin-bottom: 0;
			}
		}

		@media (max-width: map-get($sui-breakpoints, 'xs')) {
			margin-bottom: $sui-gutter-md;
		}
	}
}