////
/// @group tbar
////

/// A mixin to create tbar variants, must be based off `.tbar` (e.g., `<nav class="tbar my-custom-tbar-variant"></nav>`).
/// @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
/// strong: {Map | Null}, // See Mixin `clay-css` for available keys
/// nav: {Map | Null}, // See Mixin `clay-css` for available keys
/// item: {Map | Null}, // See Mixin `clay-css` for available keys
/// item-expand: {Map | Null}, // See Mixin `clay-css` for available keys
/// divider-before: {Map | Null}, // See Mixin `clay-css` for available keys
/// divider-after: {Map | Null}, // See Mixin `clay-css` for available keys
/// btn: {Map | Null}, // See Mixin `clay-button-variant` for available keys
/// btn-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
/// btn-monospaced: {Map | Null}, // See Mixin `clay-button-variant` for available keys
/// btn-monospaced-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
/// link: {Map | Null}, // See Mixin `clay-link` for available keys
/// link-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
/// link-monospaced: {Map | Null}, // See Mixin `clay-link` for available keys
/// link-monospaced-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
/// section: {Map | Null}, // See Mixin `clay-css` for available keys
/// component-action: {Map | Null}, // See Mixin `clay-link` for available keys
/// component-link: {Map | Null}, // See Mixin `clay-link` for available keys
/// component-title: {Map | Null}, // See Mixin `clay-text-typography` for available keys
/// component-text: {Map | Null}, // See Mixin `clay-text-typography` for available keys
/// component-label: {Map | Null}, // See Mixin `clay-label-variant` for available keys
/// tbar-label-size: {Map | Null}, // See Mixin `clay-label-size` for available keys
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg-color: {Color | String | Null}, // deprecated after 3.9.0
/// padding-x: {Number | String | Null}, // deprecated after 3.9.0
/// padding-y: {Number | String | Null}, // deprecated after 3.9.0
/// strong-font-weight: {Number | String | Null}, // deprecated after 3.9.0
/// item-justify-content: {String | Null}, // deprecated after 3.9.0
/// item-padding-x: {Number | String | Null}, // deprecated after 3.9.0
/// item-padding-y: {Number | String | Null}, // deprecated after 3.9.0
/// btn-height: {Number | String | Null}, // deprecated after 3.9.0
/// btn-font-size: {Number | String | Null}, // deprecated after 3.9.0
/// btn-font-weight: {Number | String | Null}, // deprecated after 3.9.0
/// btn-line-height: {Number | String | Null}, // deprecated after 3.9.0
/// btn-margin-x: {Number | String | Null}, // deprecated after 3.9.0
/// btn-margin-y: {Number | String | Null}, // deprecated after 3.9.0
/// btn-padding-x: {Number | String | Null}, // deprecated after 3.9.0
/// btn-padding-y: {Number | String | Null}, // deprecated after 3.9.0
/// btn-monospaced-border-radius: {Number | String | List | Null}, // deprecated after 3.9.0
/// btn-monospaced-border-width: {Number | String | List | Null}, // deprecated after 3.9.0
/// btn-monospaced-font-size: {Number | String | Null}, // deprecated after 3.9.0
/// btn-monospaced-margin-x: {Number | String | Null}, // deprecated after 3.9.0
/// btn-monospaced-margin-y: {Number | String | Null}, // deprecated after 3.9.0
/// btn-monospaced-padding: {Number | String | List | Null}, // deprecated after 3.9.0
/// btn-monospaced-size: {Number | String | Null}, // deprecated after 3.9.0
/// link-margin-x: {Number | String | Null}, // deprecated after 3.9.0
/// link-margin-y: {Number | String | Null}, // deprecated after 3.9.0
/// link-padding-x: {Number | String | Null}, // deprecated after 3.9.0
/// link-padding-y: {Number | String | Null}, // deprecated after 3.9.0
/// link-monospaced-border-radius: {Number | String | List | Null}, // deprecated after 3.9.0
/// link-monospaced-border-width: {Number | String | List | Null}, // deprecated after 3.9.0
/// link-monospaced-font-size: {Number | String | Null}, // deprecated after 3.9.0
/// link-monospaced-margin-x: {Number | String | Null}, // deprecated after 3.9.0
/// link-monospaced-margin-y: {Number | String | Null}, // deprecated after 3.9.0
/// link-monospaced-padding: {Number | String | List | Null}, // deprecated after 3.9.0
/// link-monospaced-size: {Number | String | Null}, // deprecated after 3.9.0
/// section-text-align: {String | Null}, // deprecated after 3.9.0
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-tbar-variant($map) {
	@if (type-of($map) == 'map') {
		$enable-c-inner: if(
			variable-exists(enable-c-inner),
			$enable-c-inner,
			if(
				variable-exists(cadmin-enable-c-inner),
				$cadmin-enable-c-inner,
				true
			)
		);

		$base: map-merge(
			$map,
			(
				background-color:
					setter(
						map-get($map, bg),
						map-get($map, bg-color),
						map-get($map, background-color)
					),
				padding-bottom:
					setter(
						map-get($map, padding-y),
						map-get($map, padding-bottom)
					),
				padding-left:
					setter(
						map-get($map, padding-x),
						map-get($map, padding-left)
					),
				padding-right:
					setter(
						map-get($map, padding-x),
						map-get($map, padding-right)
					),
				padding-top:
					setter(
						map-get($map, padding-y),
						map-get($map, padding-top)
					),
			)
		);

		$strong: setter(map-get($map, strong), ());
		$strong: map-merge(
			$strong,
			(
				font-weight:
					setter(
						map-get($map, strong-font-weight),
						map-get($strong, font-weight)
					),
			)
		);

		$item: setter(map-get($map, tbar-item), ());
		$item: map-merge($item, setter(map-get($map, item), ()));
		$item: map-merge(
			$item,
			(
				justify-content:
					setter(
						map-get($map, item-justify-content),
						map-get($item, justify-content)
					),
				padding-bottom:
					setter(
						map-get($map, item-padding-y),
						map-get($item, padding-bottom)
					),
				padding-left:
					setter(
						map-get($map, item-padding-x),
						map-get($item, padding-left)
					),
				padding-right:
					setter(
						map-get($map, item-padding-x),
						map-get($item, padding-right)
					),
				padding-top:
					setter(
						map-get($map, item-padding-y),
						map-get($item, padding-top)
					),
			)
		);

		$btn: setter(map-get($map, tbar-btn), ());
		$btn: map-deep-merge($btn, setter(map-get($map, btn), ()));
		$btn: map-deep-merge(
			$btn,
			(
				height:
					setter(map-get($map, btn-height), map-get($btn, height)),
				font-size:
					setter(
						map-get($map, btn-font-size),
						map-get($btn, font-size)
					),
				font-weight:
					setter(
						map-get($map, btn-font-weight),
						map-get($btn, font-weight)
					),
				line-height:
					setter(
						map-get($map, btn-line-height),
						map-get($btn, line-height)
					),
				margin-bottom:
					setter(
						map-get($map, btn-margin-y),
						map-get($btn, margin-bottom)
					),
				margin-left:
					setter(
						map-get($map, btn-margin-x),
						map-get($btn, margin-left)
					),
				margin-right:
					setter(
						map-get($map, btn-margin-x),
						map-get($btn, margin-right)
					),
				margin-top:
					setter(
						map-get($map, btn-margin-y),
						map-get($btn, margin-top)
					),
				padding-bottom:
					setter(
						map-get($map, btn-padding-y),
						map-get($btn, padding-bottom)
					),
				padding-left:
					setter(
						map-get($map, btn-padding-x),
						map-get($btn, padding-left)
					),
				padding-right:
					setter(
						map-get($map, btn-padding-x),
						map-get($btn, padding-right)
					),
				padding-top:
					setter(
						map-get($map, btn-padding-y),
						map-get($btn, padding-top)
					),
			)
		);

		$btn-c-inner: setter(map-get($btn, c-inner), ());
		$btn-c-inner: map-merge(
			$btn-c-inner,
			setter(map-get($map, btn-c-inner), ())
		);
		$btn-c-inner: map-merge(
			(
				enabled: $enable-c-inner,
				margin-bottom: math-sign(map-get($btn, padding-bottom)),
				margin-left: math-sign(map-get($btn, padding-left)),
				margin-right: math-sign(map-get($btn, padding-right)),
				margin-top: math-sign(map-get($btn, padding-top)),
			),
			$btn-c-inner
		);

		$btn-monospaced: setter(map-get($map, tbar-btn-monospaced), ());
		$btn-monospaced: map-deep-merge(
			$btn-monospaced,
			setter(map-get($map, btn-monospaced), ())
		);
		$btn-monospaced: map-deep-merge(
			$btn-monospaced,
			(
				border-radius:
					setter(
						map-get($map, btn-monospaced-border-radius),
						map-get($btn-monospaced, border-radius)
					),
				border-width:
					setter(
						map-get($map, btn-monospaced-border-width),
						map-get($btn-monospaced, border-width)
					),
				font-size:
					setter(
						map-get($map, btn-monospaced-font-size),
						map-get($btn-monospaced, font-size)
					),
				height:
					setter(
						map-get($map, btn-monospaced-size),
						map-get($btn-monospaced, height),
						map-get($btn, height)
					),
				margin-bottom:
					setter(
						map-get($map, btn-monospaced-margin-y),
						map-get($btn-monospaced, margin-bottom)
					),
				margin-left:
					setter(
						map-get($map, btn-monospaced-margin-x),
						map-get($btn-monospaced, margin-left)
					),
				margin-right:
					setter(
						map-get($map, btn-monospaced-margin-x),
						map-get($btn-monospaced, margin-right)
					),
				margin-top:
					setter(
						map-get($map, btn-monospaced-margin-y),
						map-get($btn-monospaced, margin-top)
					),
				padding:
					setter(
						map-get($map, btn-monospaced-padding),
						map-get($btn-monospaced, padding)
					),
				width:
					setter(
						map-get($map, btn-monospaced-size),
						map-get($btn-monospaced, width),
						map-get($btn, height)
					),
			)
		);

		$btn-monospaced-c-inner: setter(map-get($btn-monospaced, c-inner), ());
		$btn-monospaced-c-inner: map-merge(
			$btn-monospaced-c-inner,
			setter(map-get($map, btn-monospaced-c-inner), ())
		);
		$btn-monospaced-c-inner: map-merge(
			(
				enabled: $enable-c-inner,
				margin: math-sign(map-get($btn-monospaced, padding)),
			),
			$btn-monospaced-c-inner
		);

		$link: setter(map-get($map, tbar-link), ());
		$link: map-deep-merge($link, setter(map-get($map, link), ()));
		$link: map-deep-merge(
			$link,
			(
				margin-bottom:
					setter(
						map-get($map, link-margin-y),
						map-get($link, margin-bottom)
					),
				margin-left:
					setter(
						map-get($map, link-margin-x),
						map-get($link, margin-left)
					),
				margin-right:
					setter(
						map-get($map, link-margin-x),
						map-get($link, margin-right)
					),
				margin-top:
					setter(
						map-get($map, link-margin-y),
						map-get($link, margin-top)
					),
				padding-bottom:
					setter(
						map-get($map, link-padding-y),
						map-get($link, padding-bottom)
					),
				padding-left:
					setter(
						map-get($map, link-padding-x),
						map-get($link, padding-left)
					),
				padding-right:
					setter(
						map-get($map, link-padding-x),
						map-get($link, padding-right)
					),
				padding-top:
					setter(
						map-get($map, link-padding-y),
						map-get($link, padding-top)
					),
			)
		);

		$link-c-inner: setter(map-get($link, c-inner), ());
		$link-c-inner: map-merge(
			$link-c-inner,
			setter(map-get($map, link-c-inner), ())
		);
		$link-c-inner: map-merge(
			(
				enabled: $enable-c-inner,
				margin-bottom: math-sign(map-get($link, padding-bottom)),
				margin-left: math-sign(map-get($link, padding-left)),
				margin-right: math-sign(map-get($link, padding-right)),
				margin-top: math-sign(map-get($link, padding-top)),
			),
			$link-c-inner
		);

		$link-monospaced: setter(map-get($map, tbar-link-monospaced), ());
		$link-monospaced: map-deep-merge(
			$link-monospaced,
			setter(map-get($map, link-monospaced), ())
		);
		$link-monospaced: map-deep-merge(
			(
				border-radius:
					setter(
						map-get($map, link-monospaced-border-radius),
						map-get($link-monospaced, border-radius)
					),
				border-width:
					setter(
						map-get($map, link-monospaced-border-width),
						map-get($link-monospaced, border-width)
					),
				font-size:
					setter(
						map-get($map, link-monospaced-font-size),
						map-get($link-monospaced, font-size)
					),
				height:
					setter(
						map-get($map, link-monospaced-size),
						map-get($link-monospaced, height)
					),
				margin-bottom:
					setter(
						map-get($map, link-monospaced-margin-y),
						map-get($link-monospaced, margin-bottom)
					),
				margin-left:
					setter(
						map-get($map, link-monospaced-margin-x),
						map-get($link-monospaced, margin-left)
					),
				margin-right:
					setter(
						map-get($map, link-monospaced-margin-x),
						map-get($link-monospaced, margin-right)
					),
				margin-top:
					setter(
						map-get($map, link-monospaced-margin-y),
						map-get($link-monospaced, margin-top)
					),
				padding:
					setter(
						map-get($map, link-monospaced-padding),
						map-get($link-monospaced, padding)
					),
				width:
					setter(
						map-get($map, link-monospaced-size),
						map-get($link-monospaced, width)
					),
			),
			$link-monospaced
		);

		$link-monospaced-c-inner: setter(
			map-get($link-monospaced, c-inner),
			()
		);
		$link-monospaced-c-inner: map-merge(
			$link-monospaced-c-inner,
			setter(map-get($map, link-monospaced-c-inner), ())
		);
		$link-monospaced-c-inner: map-merge(
			(
				enabled: $enable-c-inner,
				margin: math-sign(map-get($link-monospaced, padding)),
			),
			$link-monospaced-c-inner
		);

		$section: setter(map-get($map, tbar-section), ());
		$section: map-merge($section, setter(map-get($map, section), ()));
		$section: map-merge(
			$section,
			(
				text-align:
					setter(
						map-get($map, section-text-align),
						map-get($section, text-align)
					),
			)
		);

		@if (length($base) != 0) {
			@include clay-css($base);
		}

		@if (length($strong) != 0) {
			strong {
				@include clay-css($strong);
			}
		}

		$_component-action: map-get($map, component-action);

		@if ($_component-action) {
			.component-action {
				@include clay-link($_component-action);
			}
		}

		$_component-link: map-get($map, component-link);

		@if ($_component-link) {
			.component-link {
				@include clay-link($_component-link);
			}
		}

		$tbar-nav: setter(map-get($map, tbar-nav), ());
		$tbar-nav: map-merge($tbar-nav, setter(map-get($map, nav), ()));

		@if (length($tbar-nav) != 0) {
			.tbar-nav {
				@include clay-css($tbar-nav);
			}
		}

		@if (length($item) != 0) {
			.tbar-item {
				@include clay-css($item);
			}
		}

		$_tbar-divider-before: map-get($map, tbar-divider-before);

		@if ($_tbar-divider-before) {
			.tbar-divider-before {
				@include clay-css($_tbar-divider-before);

				$before: setter(map-get($_tbar-divider-before, before), ());
				$before: map-merge(
					$before,
					setter(map-get($map, divider-before), ())
				);

				@if (length($before) != 0) {
					&::before {
						@include clay-css($before);
					}
				}

				$_after: map-get($_tbar-divider-before, after);

				@if ($_after) {
					&::after {
						@include clay-css($_after);
					}
				}
			}
		}

		$_tbar-divider-after: map-get($map, tbar-divider-after);

		@if ($_tbar-divider-after) {
			.tbar-divider-after {
				@include clay-css($_tbar-divider-after);

				$_before: map-get($_tbar-divider-after, before);

				@if ($_before) {
					&::before {
						@include clay-css($_before);
					}
				}

				$after: setter(map-get($_tbar-divider-after, after), ());
				$after: map-merge(
					$after,
					setter(map-get($map, divider-after), ())
				);

				@if (length($after) != 0) {
					&::after {
						@include clay-css($after);
					}
				}
			}
		}

		$tbar-item-expand: setter(map-get($map, tbar-item-expand), ());
		$tbar-item-expand: map-merge(
			$tbar-item-expand,
			setter(map-get($map, item-expand), ())
		);

		@if (length($tbar-item-expand) != 0) {
			.tbar-item-expand {
				@include clay-css($tbar-item-expand);
			}
		}

		@if (length($btn) != 0) {
			.tbar-btn {
				@include clay-button-variant($btn);

				@if (
					map-get($btn-c-inner, enabled) and
						(length($btn-c-inner) != 0)
				) {
					.c-inner {
						@include clay-css($btn-c-inner);
					}
				}
			}
		}

		@if (length($link) != 0) {
			.tbar-link {
				@include clay-link($link);

				@if (
					map-get($link-c-inner, enabled) and
						(length($link-c-inner) != 0)
				) {
					.c-inner {
						@include clay-css($link-c-inner);
					}
				}
			}
		}

		@if (length($btn-monospaced) != 0) {
			.tbar-btn-monospaced {
				@include clay-button-variant($btn-monospaced);

				@if (
					map-get($btn-monospaced-c-inner, enabled) and
						(length($btn-monospaced-c-inner) != 0)
				) {
					.c-inner {
						@include clay-css($btn-monospaced-c-inner);
					}
				}

				$_font-size: map-get($btn-monospaced, font-size);

				@if ($_font-size) {
					.inline-item {
						font-size: $_font-size;
					}
				}
			}
		}

		@if (length($link-monospaced) != 0) {
			.tbar-link-monospaced {
				@include clay-link($link-monospaced);

				@if (
					map-get($link-monospaced-c-inner, enabled) and
						(length($link-monospaced-c-inner) != 0)
				) {
					.c-inner {
						@include clay-css($link-monospaced-c-inner);
					}
				}

				$_font-size: map-get($link-monospaced, font-size);

				@if ($_font-size) {
					.inline-item {
						font-size: $_font-size;
					}
				}
			}
		}

		@if (length($section) != 0) {
			.tbar-section {
				@include clay-css($section);
			}
		}

		$_component-title: map-get($map, component-title);

		@if ($_component-title) {
			.component-title {
				@include clay-text-typography($_component-title);
			}
		}

		$_component-text: map-get($map, component-text);

		@if ($_component-text) {
			.component-text {
				@include clay-text-typography($_component-text);
			}
		}

		$_component-label: map-get($map, component-label);

		@if ($_component-label) {
			.component-label {
				@include clay-label-variant($_component-label);
			}
		}

		$tbar-label: setter(map-get($map, tbar-label), ());
		$tbar-label: map-merge(
			$tbar-label,
			setter(map-get($map, tbar-label-size), ())
		);

		@if (length($tbar-label) != 0) {
			.tbar-label {
				@include clay-label-size($tbar-label);
			}
		}
	}
}

/// A mixin for `tbar` to force `tbar-nav`, `tbar-item`, `tbar-section`, and `component-title` inline at specific breakpoints. This mixin is used in `.tbar-inline-xs-down`, `.tbar-inline-sm-down`, `.tbar-inline-md-down`, `.tbar-inline-lg-down`, and `.tbar-inline-xl-down`.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
/// item-padding-left: {Number | String | Null},
/// item-padding-right: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-tbar-inline-down($map) {
	@if (type-of($map) == 'map') {
		$breakpoint-down: map-get($map, breakpoint-down);

		$tbar-item: setter(map-get($map, tbar-item), ());
		$tbar-item: map-merge(
			$tbar-item,
			(
				display: setter(map-get($tbar-item, display), inline),
				padding-left:
					setter(
						map-get($tbar-item, padding-left),
						map-get($map, item-padding-left)
					),
				padding-right:
					setter(
						map-get($tbar-item, padding-right),
						map-get($map, item-padding-right)
					),
			)
		);

		@if ($breakpoint-down) {
			@include media-breakpoint-down($breakpoint-down) {
				display: block;

				.container,
				.container-fluid {
					display: block;
				}

				.component-title,
				.tbar-nav,
				.tbar-section {
					display: inline;
				}

				@if (length($tbar-item) != 0) {
					.tbar-item {
						@include clay-css($tbar-item);
					}
				}
			}
		}
	}
}