////
/// @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) {
	$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)
				),
		)
	);

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

	$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)
				),
		)
	);

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

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

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

	$btn: setter(map-get($map, btn), ());
	$btn: map-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($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, btn-monospaced), ());
	$btn-monospaced: map-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($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, link), ());
	$link: map-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($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, link-monospaced), ());
	$link-monospaced: map-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($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, section), ());
	$section: map-merge(
		$section,
		(
			text-align:
				setter(
					map-get($map, section-text-align),
					map-get($section, text-align)
				),
		)
	);

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

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

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

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

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

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

	@include clay-css($base);

	strong {
		@include clay-css($strong);
	}

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

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

	.tbar-nav {
		@include clay-css($nav);
	}

	.tbar-item {
		@include clay-css($item);
	}

	.tbar-divider-before::before {
		@include clay-css($divider-before);
	}

	.tbar-divider-after::after {
		@include clay-css($divider-after);
	}

	.tbar-item-expand {
		@include clay-css($item-expand);
	}

	.tbar-btn {
		@include clay-button-variant($btn);

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

	.tbar-link {
		@include clay-link($link);

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

	.tbar-btn-monospaced {
		@include clay-button-variant($btn-monospaced);

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

		.inline-item {
			font-size: map-get($btn-monospaced, font-size);
		}
	}

	.tbar-link-monospaced {
		@include clay-link($link-monospaced);

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

		.inline-item {
			font-size: map-get($link-monospaced, font-size);
		}
	}

	.tbar-section {
		@include clay-css($section);
	}

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

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

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

	.tbar-label {
		@include clay-label-size($tbar-label-size);
	}
}

/// 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) {
	$breakpoint-down: map-get($map, breakpoint-down);
	$item-padding-left: map-get($map, item-padding-left);
	$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;
			}

			.tbar-item {
				display: inline;
				padding-left: $item-padding-left;
				padding-right: $item-padding-right;
			}
		}
	}
}
