////
/// @group badges
////

/// A mixin for creating custom `badge` sizes.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// border-width: {List | Number}, // Default: $badge-border-width
/// font-size: {Number | String | Null},
/// height: {Number | String | Null},
/// padding-x: {Number | String | Null},
/// padding-y: {Number | String}, // Default: 0
/// lexicon-icon-height: {Number | String | Null},
/// lexicon-icon-margin-top: {Number | String | Null},
/// lexicon-icon-width: {Number | String | Null},
/// @todo
/// - Update or Deprecate this mixin in favor of a `clay-badge-variant` mixin

@mixin clay-badge-size($map) {
	$border-width: setter(map-get($map, border-width), $badge-border-width);
	$font-size: map-get($map, font-size);
	$height: map-get($map, height);
	$padding-x: map-get($map, padding-x);
	$padding-y: setter(map-get($map, padding-y), 0);

	$lexicon-icon-height: setter(
		map-get($map, lexicon-icon-height),
		map-get($map, lexicon-icon-width)
	);
	$lexicon-icon-margin-top: map-get($map, lexicon-icon-margin-top);
	$lexicon-icon-width: map-get($map, lexicon-icon-width);

	border-width: $border-width;
	font-size: $font-size;

	@if ($height) {
		line-height: $height - ($border-width * 2);
	}

	padding-bottom: $padding-y;
	padding-left: $padding-x;
	padding-right: $padding-x;
	padding-top: $padding-y;

	.inline-item {
		a,
		.btn-unstyled,
		.close {
			margin-top: $lexicon-icon-margin-top;

			.lexicon-icon {
				margin-top: 0;
			}
		}

		.lexicon-icon {
			height: $lexicon-icon-height;
			margin-top: $lexicon-icon-margin-top;
			width: $lexicon-icon-width;
		}
	}
}

@mixin clay-badge-variant($map) {
	$enabled: setter(map-get($map, enabled), true);

	$base: map-merge(
		$map,
		(
			background-color:
				setter(map-get($map, bg), 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)),
		)
	);

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

	$href: setter(map-get($map, href), ());
	$href: map-deep-merge(
		$href,
		(
			hover: (
				background-color:
					setter(
						map-get($map, hover-bg),
						map-deep-get($href, hover, background-color)
					),
				border-color:
					setter(
						map-get($map, hover-border-color),
						map-deep-get($href, hover, border-color)
					),
				color:
					setter(
						map-get($map, hover-color),
						map-deep-get($href, hover, color)
					),
			),
			focus: (
				background-color:
					setter(
						map-get($map, hover-bg),
						map-deep-get($href, focus, background-color)
					),
				border-color:
					setter(
						map-get($map, hover-border-color),
						map-deep-get($href, focus, border-color)
					),
				color:
					setter(
						map-get($map, hover-color),
						map-deep-get($href, focus, color)
					),
			),
		)
	);

	$link: setter(map-get($map, link), ());
	$link: map-deep-merge(
		$link,
		(
			color: setter(map-get($map, link-color), map-get($link, color)),
			hover: (
				color:
					setter(
						map-get($map, link-hover-color),
						map-deep-get($link, hover, color)
					),
			),
			focus: (
				color:
					setter(
						map-get($map, link-hover-color),
						map-deep-get($link, focus, color)
					),
			),
		)
	);

	$c-inner: setter(map-get($map, c-inner), ());
	$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,
						true
					)
				),
		),
		$c-inner
	);

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

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

	$badge-item-before: setter(map-get($map, badge-item-before), ());

	$badge-item-after: setter(map-get($map, badge-item-after), ());

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

		// Empty badges collapse automatically

		&:empty {
			@include clay-css($empty);
		}

		&[href],
		&[type] {
			@include clay-link($href);
		}

		a {
			@include clay-link($link);
		}

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

			a {
				$link: setter(map-get($badge-item, link), ());

				@include clay-link($link);
			}

			.btn-unstyled {
				$btn-unstyled: setter(map-get($badge-item, btn-unstyled), ());

				@include clay-button-variant($btn-unstyled);
			}

			.close {
				$close: setter(map-get($badge-item, close), ());

				@include clay-close($close);
			}

			.lexicon-icon {
				$lexicon-icon: setter(map-get($badge-item, lexicon-icon), ());

				@include clay-css($lexicon-icon);
			}
		}

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

			a {
				$link: setter(map-get($badge-item-expand, link), ());

				@include clay-link($link);
			}
		}

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

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

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

/// Bootstrap 4's Badge Variant Mixin

@mixin badge-variant($bg) {
	background-color: $bg;
	color: color-yiq($bg);

	@at-root a#{&} {
		&:hover {
			background-color: clay-darken($bg, 10%);
			color: color-yiq($bg);
		}

		&:focus,
		&.focus {
			background-color: clay-darken($bg, 10%);
			box-shadow: 0 0 0 $badge-focus-width rgba($bg, 0.5);
			color: color-yiq($bg);
			outline: 0;
		}
	}
}
