////
/// @group panels
////

/// A mixin to create Panel variants. You can base your variant off `.panel` or create your own base class (e.g., `<div class="panel my-custom-panel-variant"></div>` or `<div class="my-custom-panel"></div>`).
/// @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
/// See Mixin `clay-css` for available keys to pass into the base selector
/// header: {Map | Null}, // See Mixin `clay-css` for available keys
/// header-collapsed: {Map | Null}, // See Mixin `clay-css` for available keys
/// header-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
/// header-link: {Map | Null}, // See Mixin `clay-link` for available keys
/// title: {Map | Null}, // See Mixin `clay-css` for available keys
/// collapse-icon: {Map | Null}, // See Mixin `clay-css` for available keys
/// body: {Map | Null}, // See Mixin `clay-css` for available keys
/// footer: {Map | Null}, // See Mixin `clay-css` for available keys
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg: {Color | String | Null}, // deprecated after 3.9.0
/// header-bg: {Color | String | Null}, // deprecated after 3.9.0
/// header-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// header-border-style: {String | List | Null}, // deprecated after 3.9.0
/// header-border-width: {Number | String | List | Null}, // deprecated after 3.9.0
/// header-color: {Color | String | Null}, // deprecated after 3.9.0
/// header-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// header-margin-left: {Number | String | Null}, // deprecated after 3.9.0
/// header-margin-right: {Number | String | Null}, // deprecated after 3.9.0
/// header-margin-top: {Number | String | Null}, // deprecated after 3.9.0
/// header-padding-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// header-padding-left: {Number | String | Null}, // deprecated after 3.9.0
/// header-padding-right: {Number | String | Null}, // deprecated after 3.9.0
/// header-padding-top: {Number | String | Null}, // deprecated after 3.9.0
/// header-transition: {String | List | Null}, // deprecated after 3.9.0
/// header-collapsed-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// title-font-size: {Number | String | Null}, // deprecated after 3.9.0
/// title-font-weight: {Number | String | Null}, // deprecated after 3.9.0
/// title-text-transform: {String | List | Null}, // deprecated after 3.9.0
/// collapse-icon-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// collapse-icon-font-size: {Number | String | Null}, // deprecated after 3.9.0
/// collapse-icon-left: {Number | String | Null}, // deprecated after 3.9.0
/// collapse-icon-right: {Number | String | Null}, // deprecated after 3.9.0
/// collapse-icon-top: {Number | String | Null}, // deprecated after 3.9.0
/// body-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// body-margin-left: {Number | String | Null}, // deprecated after 3.9.0
/// body-margin-right: {Number | String | Null}, // deprecated after 3.9.0
/// body-margin-top: {Number | String | Null}, // deprecated after 3.9.0
/// body-padding-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// body-padding-left: {Number | String | Null}, // deprecated after 3.9.0
/// body-padding-right: {Number | String | Null}, // deprecated after 3.9.0
/// body-padding-top: {Number | String | Null}, // deprecated after 3.9.0
/// footer-bg: {Color | String | Null}, // deprecated after 3.9.0
/// footer-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// footer-color: {Color | String | Null}, // deprecated after 3.9.0
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-panel-variant($map) {
	@if (type-of($map) == 'map') {
		$enabled: setter(map-get($map, enabled), true);

		$base: map-merge(
			$map,
			(
				background-color:
					setter(map-get($map, bg), map-get($map, background-color)),
			)
		);

		$header: setter(map-get($map, header), ());
		$header: map-merge(
			$header,
			(
				background-color:
					setter(
						map-get($map, header-bg),
						map-get($header, background-color)
					),
				border-color:
					setter(
						map-get($map, header-border-color),
						map-get($header, border-color)
					),
				border-style:
					setter(
						map-get($map, header-border-style),
						map-get($header, border-style)
					),
				border-width:
					setter(
						map-get($map, header-border-width),
						map-get($header, border-width)
					),
				color:
					setter(
						map-get($map, header-color),
						map-get($header, color)
					),
				margin-bottom:
					setter(
						map-get($map, header-margin-bottom),
						map-get($header, margin-bottom)
					),
				margin-left:
					setter(
						map-get($map, header-margin-left),
						map-get($header, margin-left)
					),
				margin-right:
					setter(
						map-get($map, header-margin-right),
						map-get($header, margin-right)
					),
				margin-top:
					setter(
						map-get($map, header-margin-top),
						map-get($header, margin-top)
					),
				padding-bottom:
					setter(
						map-get($map, header-padding-bottom),
						map-get($header, padding-bottom)
					),
				padding-left:
					setter(
						map-get($map, header-padding-left),
						map-get($header, padding-left)
					),
				padding-right:
					setter(
						map-get($map, header-padding-right),
						map-get($header, padding-right)
					),
				padding-top:
					setter(
						map-get($map, header-padding-top),
						map-get($header, padding-top)
					),
				transition:
					setter(
						map-get($map, header-transition),
						map-get($header, transition)
					),
			)
		);

		$old-header-collapsed: setter(map-get($map, header-collapsed), ());
		$header-collapsed: setter(map-get($header, collapsed), ());
		$header-collapsed: map-merge($header-collapsed, $old-header-collapsed);
		$header-collapsed: map-merge(
			$header-collapsed,
			(
				border-color:
					setter(
						map-get($map, header-collapsed-border-color),
						map-get($header-collapsed, border-color)
					),
			)
		);

		$old-header-c-inner: setter(map-get($map, header-c-inner), ());
		$header-c-inner: setter(map-get($header, c-inner), ());
		$header-c-inner: map-merge(
			(
				enabled:
					if(
						variable-exists(enable-c-inner),
						$enable-c-inner,
						if(
							variable-exists(cadmin-enable-c-inner),
							$cadmin-enable-c-inner,
							null
						)
					),
				margin-bottom: math-sign(map-get($header, padding-bottom)),
				margin-left: math-sign(map-get($header, padding-left)),
				margin-right: math-sign(map-get($header, padding-right)),
				margin-top: math-sign(map-get($header, padding-top)),
			),
			$header-c-inner
		);

		$old-header-link: setter(map-get($map, header-link), ());
		$header-link: setter(map-get($header, link), ());
		$header-link: map-deep-merge($header-link, $old-header-link);

		$title: setter(map-get($map, title), ());
		$title: map-merge(
			$title,
			(
				font-size:
					setter(
						map-get($map, title-font-size),
						map-get($title, font-size)
					),
				font-weight:
					setter(
						map-get($map, title-font-weight),
						map-get($title, font-weight)
					),
				text-transform:
					setter(
						map-get($map, title-text-transform),
						map-get($title, text-transform)
					),
			)
		);

		$collapse-icon: setter(map-get($map, collapse-icon), ());
		$collapse-icon: map-merge(
			$collapse-icon,
			(
				bottom:
					setter(
						map-get($map, collapse-icon-bottom),
						map-get($collapse-icon, bottom)
					),
				font-size:
					setter(
						map-get($map, collapse-icon-font-size),
						map-get($collapse-icon, font-size)
					),
				left:
					setter(
						map-get($map, collapse-icon-left),
						map-get($collapse-icon, left)
					),
				right:
					setter(
						map-get($map, collapse-icon-right),
						map-get($collapse-icon, right)
					),
				top:
					setter(
						map-get($map, collapse-icon-top),
						map-get($collapse-icon, top)
					),
			)
		);

		$body: setter(map-get($map, body), ());
		$body: map-merge(
			$body,
			(
				margin-bottom:
					setter(
						map-get($map, body-margin-bottom),
						map-get($body, margin-bottom)
					),
				margin-left:
					setter(
						map-get($map, body-margin-left),
						map-get($body, margin-left)
					),
				margin-right:
					setter(
						map-get($map, body-margin-right),
						map-get($body, margin-right)
					),
				margin-top:
					setter(
						map-get($map, body-margin-top),
						map-get($body, margin-top)
					),
				padding-bottom:
					setter(
						map-get($map, body-padding-bottom),
						map-get($body, padding-bottom)
					),
				padding-left:
					setter(
						map-get($map, body-padding-left),
						map-get($body, padding-left)
					),
				padding-right:
					setter(
						map-get($map, body-padding-right),
						map-get($body, padding-right)
					),
				padding-top:
					setter(
						map-get($map, body-padding-top),
						map-get($body, padding-top)
					),
			)
		);

		$footer: setter(map-get($map, footer), ());
		$footer: map-merge(
			$footer,
			(
				background-color:
					setter(
						map-get($map, footer-bg),
						map-get($footer, background-color)
					),
				border-color:
					setter(
						map-get($map, footer-border-color),
						map-get($footer, border-color)
					),
				color:
					setter(
						map-get($map, footer-color),
						map-get($footer, color)
					),
			)
		);

		@if ($enabled) {
			@include clay-css($base);

			.panel-header {
				@include clay-css($header);

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

				&.collapsed {
					@include clay-css($header-collapsed);
				}

				&.panel-header-link {
					@include clay-link($header-link);
				}

				&:not(.collapse-icon-middle) {
					.collapse-icon-closed,
					.collapse-icon-open {
						@include clay-css($collapse-icon);
					}
				}

				.panel-group & {
					+ .panel-collapse > .panel-body {
						border-color: map-get($base, border-color);
					}
				}
			}

			.panel-title {
				@include clay-css($title);
			}

			.panel-body {
				@include clay-css($body);
			}

			.panel-footer {
				@include clay-css($footer);
			}

			// For Focus Box Shadow

			@at-root {
				.panel-group.panel-group-flush & {
					.panel-header-link {
						&,
						&.collapsed {
							border-radius: map-get($header-link, border-radius);
						}
					}
				}
			}

			@content;
		}
	}
}
