@use 'sass:math';
@use "sass:string";
@use "sass:map";
@import "../vars/grid";
.row{
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
	&>*{
		flex-shrink: 0;
		width: 100%;
		max-width: 100%;
		padding-right: calc(var(--bs-gutter-x) * .5);
		padding-left: calc(var(--bs-gutter-x) * .5);
		margin-top: var(--bs-gutter-y);
	}
}
$__grid_containers:();
$__grid_containers:map.set($__grid_containers, "0", ".container");
@each $container-suffix, $container-default-size, $container-breakpoint, $container-size in $grid-containers{
	$__grid_containers:map.set($__grid_containers, "#{$container-size}",".container#{$container-suffix}");
}
#{map-values($__grid_containers)}{
	width:100%;
	padding-right: #{$grid-gutter-width};
	padding-left: #{$grid-gutter-width};
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
}

@each $container-suffix, $container-default-size, $container-breakpoint, $container-size in $grid-containers{
	@media (min-width: #{$container-breakpoint}){
		.container#{$container-suffix}, .container{
			width: #{$container-size};
		}
	}
}
$__grid__columns:();
@each $num_columns, $column_prefix, $column_min_width in $grid-columns{
	@for $i from 1 to $num_columns + 1{
		$__grid__columns:map.set($__grid__columns, ".col#{$column_prefix}-#{$i}",".col#{$column_prefix}-#{$i}");
	}
}
#{map-values($__grid__columns)}{
	flex: 0 0 auto;
	padding-left: #{$padding};
	padding-right: #{$padding};
	box-sizing: border-box;
}
@each $num_columns, $column_prefix, $column_min_width in $grid-columns{
	@if($column_min_width == ""){
		@for $i from 1 through $num_columns{
			.col#{$column_prefix}-#{$i}{
				width: #{math.div($i,$num_columns) * 100%};
			}
		}
	}
	@else{
		@media (min-width:#{$column_min_width}) {
			@for $i from 1 through $num_columns{
				.col#{$column_prefix}-#{$i}{
					width: #{math.div($i,$num_columns) * 100%};
				}
			}
		}
	}
}
@for $i from 1 through 24{
	.grid-cols-#{$i}{
		grid-template-columns:repeat(#{$i},minmax(0,#{$i}fr));
	}
}

@each $dp in $general_display{
	.#{$dp}-hover{
		&:hover{
			display: str-replace('display-', '',#{$dp});
		}
	}
}
@each $value in $flex-options{
	.flex-#{$value}{
		flex: #{$value};
	}
}
@each $value in $flex-options{
	.flex-#{$value}-hover{
		&:hover{
			flex: #{$value};
		}
	}
}
@each $value in $flex-grow-options{
	@if $value == 1{
		.flex-grow{
			flex-grow: 1;
		}
	}
	@else if $value == 0{
		.flex-grow-none{
			flex-grow: 0;
		}
	}
	@else{
		.flex-grow-#{$value}{
			flex-grow: #{$value};
		}
	}
}

@each $value in $flex-grow-options{
	@if $value == 1{
		.flex-grow-hover{
			&:hover{
				flex-grow: 1;
			}
		}
	}
	@else if $value == 0{
		.flex-grow-none-hover{
			&:hover{
				flex-grow: 0;
			}
		}
	}
	@else{
		.flex-grow-#{$value}-hover{
			&:hover{
				flex-grow: #{$value};
			}
		}
	}
}