////
/// @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: $enable-grid-classes,
		),
		$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
					);
				}
			}
		}
	}
}