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

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

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

	// 100% wide container at all breakpoints

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

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

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

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

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

			@each $cadmin-name, $cadmin-width in $cadmin-grid-breakpoints {
				$container-max-width-pos: index(
					$cadmin-grid-breakpoints,
					$cadmin-breakpoint
						map-get($cadmin-grid-breakpoints, $cadmin-breakpoint)
				);
				$grid-breakpoint-pos: index(
					$cadmin-grid-breakpoints,
					$cadmin-name $cadmin-width
				);

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

// Rows contain your columns.

@if $cadmin-enable-grid-classes {
	.row,
	&.row {
		display: flex;
		flex-wrap: wrap;
		margin-left: math-sign($cadmin-grid-gutter-width * 0.5);
		margin-right: math-sign($cadmin-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 $cadmin-enable-grid-classes {
	%grid-column {
		padding-left: $cadmin-grid-gutter-width * 0.5;
		padding-right: $cadmin-grid-gutter-width * 0.5;
		position: relative;
		width: 100%;
	}

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

		// Allow columns to stretch full width below their breakpoints

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

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

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

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

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

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

			@for $cadmin-i from 1 through $cadmin-grid-columns {
				.col#{$cadmin-infix}-#{$cadmin-i} {
					flex: 0
						0
						calc(#{$cadmin-i} / #{$cadmin-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(
						#{$cadmin-i} / #{$cadmin-grid-columns} * 100%
					);
				}
			}

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

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

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

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

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

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

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

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

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

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

			@if not($cadmin-infix == '') {
				&#{$cadmin-infix}-down {
					@include media-breakpoint-down($cadmin-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($cadmin-grid-gutter-width * 0.5);
			margin-right: math-sign($cadmin-grid-gutter-width * 0.5);
		}
	}

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

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