////
/// @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}
/// align-items: {String | Null},
/// bg: {Color | String | Null},
/// bg-image: {String | List | Null},
/// bg-position: {String | List | Null},
/// bg-size: {Number | String | List | Null},
/// border-color: {Color | String | List | Null},
/// border-radius: {Number | String | List | Null},
/// border-style: {String | List | Null},
/// border-width: {Number | String | List | Null},
/// color: {Color | String | Null},
/// cursor: {String | Null},
/// display: {String | Null},
/// flex-basis: {Number | String | Null},
/// flex-direction: {String | Null},
/// flex-grow: {Number | String | Null},
/// flex-shrink: {Number | String | Null},
/// flex-wrap: {String | Null},
/// float: {String | Null},
/// font-family: {Number | String | Null},
/// font-size: {Number | String | Null},
/// font-weight: {Number | String | Null},
/// height: {Number | String | Null},
/// justify-content: {String | Null},
/// line-height: {Number | String | Null},
/// margin-bottom: {Number | String | Null},
/// margin-left: {Number | String | Null},
/// margin-right: {Number | String | Null},
/// margin-top: {Number | String | Null},
/// max-height: {Number | String | Null},
/// max-width: {Number | String | Null},
/// min-height: {Number | String | Null},
/// min-width: {Number | String | Null},
/// opacity: {Number | String | Null},
/// order: {Number | String | Null},
/// padding-bottom: {Number | String | Null},
/// padding-left: {Number | String | Null},
/// padding-right: {Number | String | Null},
/// padding-top: {Number | String | Null},
/// position: {String | Null},
/// bottom: {Number | String | Null},
/// left: {Number | String | Null},
/// right: {Number | String | Null},
/// top: {Number | String | Null},
/// text-align: {String | Null},
/// text-decoration: {String | Null},
/// text-transform: {String | Null},
/// transition: {String | List | Null},
/// vertical-align: {String | Null},
/// width: {Number | String | Null},
/// padding-bottom-mobile: {Number | String | Null},
/// padding-left-mobile: {Number | String | Null},
/// padding-right-mobile: {Number | String | Null},
/// padding-top-mobile: {Number | String | Null},
/// @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);

	$align-items: map-get($map, align-items);
	$bg: map-get($map, bg);
	$bg-image: map-get($map, bg-image);
	$bg-position: map-get($map, bg-position);
	$bg-size: map-get($map, bg-size);
	$border-color: map-get($map, border-color);
	$border-radius: map-get($map, border-radius);
	$border-style: map-get($map, border-style);
	$border-width: map-get($map, border-width);
	$color: map-get($map, color);
	$cursor: map-get($map, cursor);
	$display: map-get($map, display);
	$flex-basis: map-get($map, flex-basis);
	$flex-direction: map-get($map, flex-direction);
	$flex-grow: map-get($map, flex-grow);
	$flex-shrink: map-get($map, flex-shrink);
	$flex-wrap: map-get($map, flex-wrap);
	$float: map-get($map, float);
	$font-family: map-get($map, font-family);
	$font-size: map-get($map, font-size);
	$font-weight: map-get($map, font-weight);
	$height: map-get($map, height);
	$justify-content: map-get($map, justify-content);
	$line-height: map-get($map, line-height);
	$margin-bottom: map-get($map, margin-bottom);
	$margin-left: map-get($map, margin-left);
	$margin-right: map-get($map, margin-right);
	$margin-top: map-get($map, margin-top);
	$max-height: map-get($map, max-height);
	$max-width: map-get($map, max-width);
	$min-height: map-get($map, min-height);
	$min-width: map-get($map, min-width);
	$opacity: map-get($map, opacity);
	$order: map-get($map, order);
	$padding-bottom: map-get($map, padding-bottom);
	$padding-left: map-get($map, padding-left);
	$padding-right: map-get($map, padding-right);
	$padding-top: map-get($map, padding-top);
	$position: map-get($map, position);

	$bottom: map-get($map, bottom);
	$left: map-get($map, left);
	$right: map-get($map, right);
	$top: map-get($map, top);

	$text-align: map-get($map, text-align);
	$text-decoration: map-get($map, text-decoration);
	$text-transform: map-get($map, text-transform);
	$transition: map-get($map, transition);
	$vertical-align: map-get($map, vertical-align);
	$width: map-get($map, width);

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

	align-items: $align-items;
	background-color: $bg;
	background-image: $bg-image;
	background-position: $bg-position;
	background-size: $bg-size;
	border-color: $border-color;
	border-radius: $border-radius;
	border-style: $border-style;
	border-width: $border-width;
	color: $color;
	cursor: $cursor;
	display: $display;
	font-family: $font-family;
	font-size: $font-size;
	font-weight: $font-weight;
	flex-basis: $flex-basis;
	flex-direction: $flex-direction;
	flex-grow: $flex-grow;
	flex-shrink: $flex-shrink;
	flex-wrap: $flex-wrap;
	float: $float;
	justify-content: $justify-content;
	height: $height;
	line-height: $line-height;
	margin-bottom: $margin-bottom;
	margin-left: $margin-left;
	margin-right: $margin-right;
	margin-top: $margin-top;
	max-height: $max-height;
	max-width: $max-width;
	min-height: $min-height;
	min-width: $min-width;
	opacity: $opacity;
	order: $order;
	padding-bottom: $padding-bottom;
	padding-left: $padding-left;
	padding-right: $padding-right;
	padding-top: $padding-top;
	position: $position;

	bottom: $bottom;
	left: $left;
	right: $right;
	top: $top;

	text-align: $text-align;
	text-decoration: $text-decoration;
	text-transform: $text-transform;
	transition: $transition;
	vertical-align: $vertical-align;
	width: $width;

	@if($breakpoint-down) {
		@include media-breakpoint-down($breakpoint-down) {
			padding-bottom: $padding-bottom-mobile;
			padding-left: $padding-left-mobile;
			padding-right: $padding-right-mobile;
			padding-top: $padding-top-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
/// display: {String | Null},
/// flex-wrap: {String | Null},
/// justify-content: {String | Null},
/// margin-bottom: {Number | String | Null},
/// margin-left: {Number | String | Null},
/// margin-right: {Number | String | Null},
/// margin-top: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-row($map) {
	$display: map-get($map, display);
	$flex-wrap: map-get($map, flex-wrap);
	$justify-content: map-get($map, justify-content);
	$margin-bottom: map-get($map, margin-bottom);
	$margin-left: map-get($map, margin-left);
	$margin-right: map-get($map, margin-right);
	$margin-top: map-get($map, margin-top);

	display: $display;
	flex-wrap: $flex-wrap;
	justify-content: $justify-content;
	margin-bottom: $margin-bottom;
	margin-left: $margin-left;
	margin-right: $margin-right;
	margin-top: $margin-top;
}

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