////
/// @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-right: 0;
			padding-left: 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) {
	$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);
}

@mixin clay-custom-grid-columns($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) {
	@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) {
				@include clay-css($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) {
				@include clay-css($breakpoint-down);
			}
		}
	}
}

/// 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});
	}
}
