////
/// @group Grid
////

/// A general mixin used to remove gutters on a container (e.g., `.container` or `.container-fluid`). This removes the gutter and the offset.

@mixin clay-container-no-gutters {
	padding-left: 0;
	padding-right: 0;

	> .row {
		margin-left: 0;
		margin-right: 0;

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

/// A general mixin used for component containers (e.g., `.container`, `.container-fluid`, `.form-group`, `.input-group-inset-item`)
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
/// breakpoint-up: {String | Null}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead
/// breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
/// See Mixin `clay-css` for available keys to pass into the base selector
/// mobile: {Map | Null},  // See Mixin `clay-css` for available keys
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg: {Color | String | Null}, // deprecated after 3.9.0
/// bg-image: {String | List | Null}, // deprecated after 3.9.0
/// bg-position: {String | List | Null}, // deprecated after 3.9.0
/// bg-size: {Number | String | List | Null}, // deprecated after 3.9.0
/// padding-bottom-mobile: {Number | String | Null}, // deprecated after 3.9.0
/// padding-left-mobile: {Number | String | Null}, // deprecated after 3.9.0
/// padding-right-mobile: {Number | String | Null}, // deprecated after 3.9.0
/// padding-top-mobile: {Number | String | Null}, // deprecated after 3.9.0
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-container($map) {
	@if (type-of($map) == 'map') {
		$enabled: setter(map-get($map, enabled), true);
		$breakpoint-up: map-get($map, breakpoint-up);
		$breakpoint-down: setter(clay-breakpoint-prev($breakpoint-up), null);

		$base: map-merge(
			$map,
			(
				background-color:
					setter(map-get($map, bg), map-get($map, background-color)),
				background-image:
					setter(
						map-get($map, bg-image),
						map-get($map, background-image)
					),
				background-position:
					setter(
						map-get($map, bg-position),
						map-get($map, background-position)
					),
				background-size:
					setter(
						map-get($map, bg-size),
						map-get($map, background-size)
					),
			)
		);

		$mobile: setter(map-get($map, mobile), ());
		$mobile: map-merge(
			$mobile,
			(
				padding-bottom:
					setter(
						map-get($map, padding-bottom-mobile),
						map-get($mobile, padding-bottom)
					),
				padding-left:
					setter(
						map-get($map, padding-left-mobile),
						map-get($mobile, padding-left)
					),
				padding-right:
					setter(
						map-get($map, padding-right-mobile),
						map-get($mobile, padding-right)
					),
				padding-top:
					setter(
						map-get($map, padding-top-mobile),
						map-get($mobile, padding-top)
					),
			)
		);

		@if ($enabled) {
			@include clay-css($base);

			@if ($breakpoint-down) {
				@include media-breakpoint-down($breakpoint-down) {
					@include clay-css($mobile);
				}
			}
		}
	}
}

/// A general mixin to create custom `.row` elements. `.row`'s in Bootstrap have negative `margin-left` and `margin-right` values to offset the padding inside the columns so content will be positioned flush, vertically, with the rest of the page's content.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// See Mixin `clay-css` for available keys to pass into the base selector
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-row($map) {
	@include clay-css($map);

	$_media-breakpoint-down: map-get($map, media-breakpoint-down);
	$_media-breakpoint-up: map-get($map, media-breakpoint-up);

	@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
		@include clay-generate-media-breakpoints($map, 'clay-css');
	}
}

/// @deprecated as of v3.130.0

@mixin clay-custom-grid-columns($map) {
	@if (type-of($map) == 'map') {
		$custom-grid-props: map-merge(
			(
				enabled:
					if(
						variable-exists(enable-grid-classes),
						$enable-grid-classes,
						if(
							variable-exists(cadmin-enable-grid-classes),
							$cadmin-enable-grid-classes,
							true
						)
					),
			),
			$map
		);

		$enabled: map-get($custom-grid-props, enabled);

		@if ($custom-grid-props and $enabled) {
			display: block;
			flex-basis: map-get(map-get($custom-grid-props, base), flex-basis);
			flex-grow: 1;
			max-width: map-get(map-get($custom-grid-props, base), max-width);
			min-width: map-get(map-get($custom-grid-props, base), min-width);
			padding-left: map-get(
				map-get($custom-grid-props, base),
				padding-left
			);
			padding-right: map-get(
				map-get($custom-grid-props, base),
				padding-right
			);
			position: relative;
			width: 100%;

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

				@if ($next) {
					@media (min-width: map-get(map-get($custom-grid-props, $next), breakpoint)) {
						flex-basis: map-get(
							map-get($custom-grid-props, $next),
							flex-basis
						);
						max-width: map-get(
							map-get($custom-grid-props, $next),
							max-width
						);
						min-width: map-get(
							map-get($custom-grid-props, $next),
							min-width
						);
						padding-left: map-get(
							map-get($custom-grid-props, $next),
							padding-left
						);
						padding-right: map-get(
							map-get($custom-grid-props, $next),
							padding-right
						);
					}
				}
			}
		}
	}
}

/// A mixin that generates media-breakpoint-{up|down} styles from a Sass map.
/// @param {Map} $map - A map of `key: value` pairs that is passed to the `clay-css` mixin

@mixin clay-generate-media-breakpoints($map, $mixin: 'clay-css') {
	@if (type-of($map) == 'map') {
		@if (map-get($map, media-breakpoint-up)) {
			$media-breakpoint-up: map-get($map, media-breakpoint-up);

			@each $breakpoint in map-keys($media-breakpoint-up) {
				$breakpoint-up: map-get($media-breakpoint-up, $breakpoint);

				@include media-breakpoint-up($breakpoint) {
					@if ($mixin == 'clay-css') {
						@include clay-css($breakpoint-up);
					} @else if ($mixin == 'clay-button-variant') {
						@include clay-button-variant($breakpoint-up);
					} @else if ($mixin == 'clay-input-group-variant') {
						@include clay-input-group-variant($breakpoint-up);
					} @else if ($mixin == 'clay-input-group-text-variant') {
						@include clay-input-group-text-variant($breakpoint-up);
					} @else if ($mixin == 'clay-dropdown-menu-variant') {
						@include clay-dropdown-menu-variant($breakpoint-up);
					} @else if ($mixin == 'clay-map-to-css') {
						@include clay-map-to-css($breakpoint-up);
					} @else if ($mixin == 'clay-menubar-vertical-variant') {
						@include clay-menubar-vertical-variant($breakpoint-up);
					} @else if ($mixin == 'clay-modal-variant') {
						@include clay-modal-variant($breakpoint-up);
					} @else if ($mixin == 'clay-select-variant') {
						@include clay-select-variant($breakpoint-up);
					} @else if ($mixin == 'clay-slideout-variant') {
						@include clay-slideout-variant($breakpoint-up);
					}
				}
			}
		}

		@if (map-get($map, media-breakpoint-down)) {
			$media-breakpoint-down: map-get($map, media-breakpoint-down);

			@each $breakpoint in map-keys($media-breakpoint-down) {
				$breakpoint-down: map-get($media-breakpoint-down, $breakpoint);

				@include media-breakpoint-down($breakpoint) {
					@if ($mixin == 'clay-css') {
						@include clay-css($breakpoint-down);
					} @else if ($mixin == 'clay-button-variant') {
						@include clay-button-variant($breakpoint-down);
					} @else if ($mixin == 'clay-input-group-variant') {
						@include clay-input-group-variant($breakpoint-down);
					} @else if ($mixin == 'clay-input-group-text-variant') {
						@include clay-input-group-text-variant(
							$breakpoint-down
						);
					} @else if ($mixin == 'clay-dropdown-menu-variant') {
						@include clay-dropdown-menu-variant($breakpoint-down);
					} @else if ($mixin == 'clay-map-to-css') {
						@include clay-map-to-css($breakpoint-down);
					} @else if ($mixin == 'clay-menubar-vertical-variant') {
						@include clay-menubar-vertical-variant(
							$breakpoint-down
						);
					} @else if ($mixin == 'clay-modal-variant') {
						@include clay-modal-variant($breakpoint-down);
					} @else if ($mixin == 'clay-select-variant') {
						@include clay-select-variant($breakpoint-down);
					} @else if ($mixin == 'clay-slideout-variant') {
						@include clay-slideout-variant($breakpoint-down);
					} @else {
						@error "The mixin, `#{$mixin}`, is not defined in clay-generate-media-breakpoints.";
					}
				}
			}
		}
	}
}

/// A Bootstrap 4 mixin that generates the correct number of grid classes given any value of `$grid-columns`. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
/// @deprecated
/// @param {Number} $columns[$grid-columns]
/// @param {Number} $gutter[$grid-gutter-width]
/// @param {Map} $breakpoints[$grid-breakpoints]

@mixin make-grid-columns(
	$columns: $grid-columns,
	$gutter: $grid-gutter-width,
	$breakpoints: $grid-breakpoints
) {
	%grid-column {
		padding-left: $gutter * 0.5;
		padding-right: $gutter * 0.5;
		position: relative;
		width: 100%;
	}

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

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

		@include media-breakpoint-up($breakpoint, $breakpoints) {
			.col#{$infix} {
				flex-basis: 0;
				flex-grow: 1;
				max-width: 100%;
			}

			@for $i from 1 through $grid-row-columns {
				.row-cols#{$infix}-#{$i} {
					@include row-cols($i);
				}
			}

			.col#{$infix}-auto {
				@include make-col-auto();
			}

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

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

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

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

			@for $i from 0 through ($columns - 1) {
				@if not($infix == '' and $i == 0) {
					.offset#{$infix}-#{$i} {
						@include make-col-offset($i, $columns);
					}
				}
			}
		}
	}
}

/// A Bootstrap 4 mixin that generates basic container styles. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
/// @deprecated
/// @param {Number} $gutter[$grid-gutter-width]

@mixin make-container($gutter: $grid-gutter-width) {
	margin-left: auto;
	margin-right: auto;
	padding-left: $gutter * 0.5;
	padding-right: $gutter * 0.5;
	width: 100%;
}

/// A Bootstrap 4 mixin that generates container `max-width`s at each breakpoint. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
/// @deprecated
/// @param {Number} $max-widths[$container-max-widths]
/// @param {Number} $breakpoints[$grid-breakpoints]

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

/// A Bootstrap 4 mixin that generates basic `.row` styles. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
/// @deprecated
/// @param {Number} $gutter[$grid-gutter-width]

@mixin make-row($gutter: $grid-gutter-width) {
	display: flex;
	flex-wrap: wrap;
	margin-left: math-sign($gutter * 0.5);
	margin-right: math-sign($gutter * 0.5);
}

/// A Bootstrap 4 mixin. This mixin is deprecated, not used in Bootstrap 4.
/// @deprecated
/// @param {Number} $gutter[$grid-gutter-width]

@mixin make-col-ready($gutter: $grid-gutter-width) {
	padding-left: $gutter * 0.5;
	padding-right: $gutter * 0.5;
	position: relative;
	width: 100%;
}

/// A Bootstrap 4 mixin that generates the width of each `.col-{bp}-*` class. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
/// @deprecated
/// @param {Number} $size
/// @param {Number} $columns[$grid-columns]

@mixin make-col($size, $columns: $grid-columns) {
	flex: 0 0 calc(#{$size} / #{$columns} * 100%);
	max-width: calc(#{$size} / #{$columns} * 100%);
}

/// A Bootstrap 4 mixin that generates styles for `.col-{bp}-auto` classes. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
/// @deprecated
/// @param {Number} $size
/// @param {Number} $columns[$grid-columns]

@mixin make-col-auto() {
	flex: 0 0 auto;
	max-width: 100%;
	width: auto;
}

/// A Bootstrap 4 mixin that generates styles for `.col-{bp}-auto` classes. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
/// @deprecated
/// @param {Number} $size
/// @param {Number} $columns[$grid-columns]

@mixin make-col-offset($size, $columns: $grid-columns) {
	margin-left: calc(#{$size} / #{$columns} * 100%);
}

/// A Bootstrap 4 mixin that generates styles for `.row-cols-{bp}-*` classes. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
/// @deprecated
/// @param {Number} $count

@mixin row-cols($count) {
	& > * {
		flex: 0 0 calc(100% / #{$count});
		max-width: calc(100% / #{$count});
	}
}