@use "sass:math";
@import "../../styles/tools/breakpoints";
@import "../../styles/variables";

@mixin make-col($size) {
	flex: 0 0 percentage(math.div($size, $grid-columns));
	max-width: percentage(math.div($size, $grid-columns));
}

@mixin make-col-offset($size) {
	$num: math.div($size, $grid-columns);

	margin-left: if($num == 0, 0, percentage($num));
}

.s-col {
	width: 100%;
	padding: math.div($grid-gutter, 2);
	flex-basis: 0;
	flex-grow: 1;
	max-width: 100%;

	&.col-auto {
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
	}

	@for $i from 1 through $grid-columns {
		&.col-#{$i} {
			@include make-col($i);
		}
	}

	@for $i from 1 through $grid-columns - 1 {
		&.offset-#{$i} {
			@include make-col-offset($i);
		}
	}

	@include create_breakpoints using ($screen_size) {
		&.#{$screen_size}-auto {
			flex: 0 0 auto;
			width: auto;
			max-width: 100%;
		}
		@for $i from 1 through $grid-columns {
			&.#{$screen_size}-#{$i} {
				@include make-col($i);
			}
		}
		@for $i from 0 through $grid-columns - 1 {
			&.offset-#{$screen_size}-#{$i} {
				@include make-col-offset($i);
			}
		}
	}
}