@if $enable-grid-classes {
	// Single container class with breakpoint max-widths

	.container {
		@include clay-css($clay-container);

		@each $breakpoint, $container-max-width in $container-max-widths {
			@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
				max-width: $container-max-width;
			}
		}
	}

	// 100% wide container at all breakpoints

	%container-fluid {
		@include clay-css($clay-container-fluid);
	}

	.container-fluid {
		@extend %container-fluid !optional;
	}

	// Responsive containers that are 100% wide until a breakpoint

	@each $breakpoint, $container-max-width in $container-max-widths {
		.container-#{$breakpoint} {
			@extend %container-fluid !optional;
		}

		@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
			%responsive-container-#{$breakpoint} {
				max-width: $container-max-width;
			}

			@each $name, $width in $grid-breakpoints {
				$_container-max-width: clay-get-fallback($container-max-width);
				$_width: clay-get-fallback($width);

				$container-max-width-pos: index(
					$grid-breakpoints,
					$breakpoint map-get($grid-breakpoints, $breakpoint)
				);
				$grid-breakpoint-pos: index($grid-breakpoints, $name $width);

				@if ($container-max-width-pos) and
					($container-max-width-pos >= $grid-breakpoint-pos)
				{
					.container#{breakpoint-infix($name, $grid-breakpoints)} {
						@extend %responsive-container-#{$breakpoint} !optional;
					}
				}
			}
		}
	}
}

// Rows contain your columns.

@if $enable-grid-classes {
	.row {
		display: flex;
		flex-wrap: wrap;
		margin-left: math-sign($grid-gutter-width * 0.5);
		margin-right: math-sign($grid-gutter-width * 0.5);
	}

	// Remove the negative margin from default .row, then the horizontal padding
	// from all immediate children columns (to prevent runaway style inheritance).

	.no-gutters {
		margin-left: 0;
		margin-right: 0;

		> .col,
		> [class*='col-'] {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

// Common styles for small and large grid columns

@if $enable-grid-classes {
	%grid-column {
		padding-left: $grid-gutter-width * 0.5;
		padding-right: $grid-gutter-width * 0.5;
		position: relative;
		width: 100%;
	}

	@each $breakpoint in map-keys($grid-breakpoints) {
		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

		// Allow columns to stretch full width below their breakpoints

		@for $i from 1 through $grid-columns {
			.col#{$infix}-#{$i} {
				@extend %grid-column !optional;
			}
		}

		.col#{$infix},
		.col#{$infix}-auto {
			@extend %grid-column !optional;
		}

		@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
			// Provide basic `.col-{bp}` classes for equal-width flexbox columns

			.col#{$infix} {
				flex-basis: 0;
				flex-grow: 1;
				max-width: 100%;
			}

			@for $i from 1 through $grid-row-columns {
				.row-cols#{$infix}-#{$i} {
					& > * {
						flex: 0 0 calc(100% / #{$i});
						max-width: calc(100% / #{$i});
					}
				}
			}

			.col#{$infix}-auto {
				flex: 0 0 auto;
				max-width: 100%;
				width: auto;
			}

			@for $i from 1 through $grid-columns {
				.col#{$infix}-#{$i} {
					flex: 0 0 calc(#{$i} / #{$grid-columns} * 100%);

					// Add a `max-width` to ensure content within each column does not blow out
					// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
					// do not appear to require this.

					max-width: calc(#{$i} / #{$grid-columns} * 100%);
				}
			}

			.order#{$infix}-first {
				order: -1;
			}

			.order#{$infix}-last {
				order: $grid-columns + 1;
			}

			@for $i from 0 through $grid-columns {
				.order#{$infix}-#{$i} {
					order: $i;
				}
			}

			// `$grid-columns - 1` because offsetting by the width of an entire row isn't possible
			@for $i from 0 through ($grid-columns - 1) {
				// Avoid emitting useless .offset-0

				@if not($infix == '' and $i == 0) {
					.offset#{$infix}-#{$i} {
						margin-left: calc(#{$i} / #{$grid-columns} * 100%);
					}
				}
			}
		}
	}
}

@if ($enable-grid-classes) {
	.container-fluid-max {
		@each $breakpoint, $max-width in $container-max-widths {
			$infix: '-#{$breakpoint}';

			&#{$infix} {
				max-width: $max-width;
			}
		}
	}

	.container-no-gutters {
		@include clay-container-no-gutters;

		@each $breakpoint in map-keys($grid-breakpoints) {
			$next: breakpoint-next($breakpoint, $grid-breakpoints);
			$infix: breakpoint-infix($next, $grid-breakpoints);

			// .container-no-gutters-sm-down, md-down, lg-down, xl-down

			@if not($infix == '') {
				&#{$infix}-down {
					@include media-breakpoint-down($breakpoint) {
						@include clay-container-no-gutters;
					}
				}
			}
		}
	}

	%clay-custom-grid-wrapper {
		container-type: inline-size;
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		margin-bottom: 0;
		padding-left: 0;

		.container &,
		.container-fluid & {
			margin-left: math-sign($grid-gutter-width * 0.5);
			margin-right: math-sign($grid-gutter-width * 0.5);
		}
	}

	.container-form-lg {
		@include clay-container($container-form-lg);
	}

	.container-view {
		@include clay-container($container-view);
	}
}