////
/// @group Cards
////

/// A mixin that styles a Card Section (e.g., `.card-header`, `.card-body`, `.card-footer` or `.card-row`). This mixin is used by `clay-card-variant`.
/// @param {Map} $map - A map of key-value pairs. The keys are defined in the mixin. Example below:
/// @example
/// (
/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
/// 	// .card-section
/// 	before: (
/// 		// .card-section::before
/// 	),
/// 	after: (
/// 		// .card-section::after
/// 	),
/// 	first-child: (
/// 		// .card-section:first-child
/// 	),
/// 	last-child: (
/// 		// .card-section:last-child
/// 	),
/// 	autofit-col: (
/// 		// .card-section .autofit-col
/// 	),
///
/// )
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg: {Color | String | Null}, // deprecated after 3.9.0
/// autofit-col-padding-left: {Number | String | Null},
/// autofit-col-padding-right: {Number | String | Null},

@mixin clay-card-section-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)),
			)
		);

		$autofit-col: setter(map-get($map, autofit-col), ());
		$autofit-col: map-merge(
			$autofit-col,
			(
				padding-left:
					setter(
						map-get($map, autofit-col-padding-left),
						map-get($autofit-col, padding-left)
					),
				padding-right:
					setter(
						map-get($map, autofit-col-padding-right),
						map-get($autofit-col, padding-right)
					),
			)
		);

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

			&::before {
				@include clay-css(map-get($map, before));
			}

			&::after {
				@include clay-css(map-get($map, after));
			}

			&:first-child {
				@include clay-css(map-get($map, first-child));
			}

			&:last-child {
				@include clay-css(map-get($map, last-child));
			}

			.autofit-col {
				@include clay-css($autofit-col);
			}
		}
	}
}

/// A mixin that styles a custom Card.
/// @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 .dropdown-item styles from being output. Default: true
/// 	hover: (
/// 		// .card:hover, .card.hover
/// 		after: (
/// 			// .card:hover::after, .card.hover::after
/// 		),
/// 		card-title: (
/// 			// .card:hover .card-title, .card.hover .card-title
/// 		),
/// 		card-subtitle: (
/// 			// .card:hover .card-subtitle, .card.hover .card-subtitle
/// 		),
/// 		card-text: (
/// 			// .card:hover .card-text, .card.hover .card-text
/// 		),
/// 		card-link: (
/// 			// .card:hover .card-link, .card.hover .card-link
/// 		),
/// 	),
/// 	focus: (
/// 		// .card:focus, .card.focus
/// 		after: (
/// 			// .card:focus::after, .card.focus::after
/// 		),
/// 		card-title: (
/// 			// .card:focus .card-title, .card.focus .card-title
/// 		),
/// 		card-subtitle: (
/// 			// .card:focus .card-subtitle, .card.focus .card-subtitle
/// 		),
/// 		card-text: (
/// 			// .card:focus .card-text, .card.focus .card-text
/// 		),
/// 		card-link: (
/// 			// .card:focus .card-link, .card.focus .card-link
/// 		),
/// 	),
/// 	active: (
/// 		// .card:active, .card.active
/// 		after: (
/// 			// .card:active::after, .card.active::after
/// 		),
/// 		card-title: (
/// 			// .card:active .card-title, .card.active .card-title
/// 		),
/// 		card-subtitle: (
/// 			// .card:active .card-subtitle, .card.active .card-subtitle
/// 		),
/// 		card-text: (
/// 			// .card:active .card-text, .card.active .card-text
/// 		),
/// 		card-link: (
/// 			// .card:active .card-link, .card.active .card-link
/// 		),
/// 	),
/// 	disabled: (
/// 		// .card:disabled, .card.disabled
/// 		after: (
/// 			// .card:disabled::after, .card.disabled::after
/// 		),
/// 		card-title: (
/// 			// .card:disabled .card-title, .card.disabled .card-title
/// 		),
/// 		card-subtitle: (
/// 			// .card:disabled .card-subtitle, .card.disabled .card-subtitle
/// 		),
/// 		card-text: (
/// 			// .card:disabled .card-text, .card.disabled .card-text
/// 		),
/// 		card-link: (
/// 			// .card:disabled .card-link, .card.disabled .card-link
/// 		),
/// 	),
/// 	after: (
/// 		// .card::after
/// 	),
/// 	aspect-ratio: (
/// 		// .card .aspect-ratio
/// 		custom-control: (
/// 			label: (
/// 				// .card .custom-control label, .card .form-check-label
/// 			),
/// 		),
/// 		label: (
/// 			// .card .aspect-ratio .label
/// 		),
/// 	),
/// 	aspect-ratio-item: (
/// 		// .card .aspect-ratio-item
/// 	),
/// 	aspect-ratio-item-top-left: (
/// 		// .card .aspect-ratio-item-top-left
/// 	),
/// 	aspect-ratio-item-top-center: (
/// 		// .card .aspect-ratio-item-top-center
/// 	),
/// 	aspect-ratio-item-top-right: (
/// 		// .card .aspect-ratio-item-top-right
/// 	),
/// 	aspect-ratio-item-right-middle: (
/// 		// .card .aspect-ratio-item-right-middle
/// 	),
/// 	aspect-ratio-item-bottom-right: (
/// 		// .card .aspect-ratio-item-bottom-right
/// 	),
/// 	aspect-ratio-item-bottom-center: (
/// 		// .card .aspect-ratio-item-bottom-center
/// 	),
/// 	aspect-ratio-item-bottom-left: (
/// 		// .card .aspect-ratio-item-bottom-left
/// 	),
/// 	hr: (
/// 		// .card > hr
/// 		before: (
/// 			// .card > hr::before
/// 		),
/// 		after: (
/// 			// .card > hr::after
/// 		),
/// 	),
/// 	sticker: (
/// 		// .card .sticker
/// 	),
/// 	card: (
/// 		// .card .card
/// 	),
/// 	card-header: (
/// 		// .card .card-header
/// 	),
/// 	card-body: (
/// 		// .card .card-body
/// 	),
/// 	card-footer: (
/// 		// .card .card-footer
/// 	),
/// 	card-row: (
/// 		// .card .card-row
/// 		autofit-col: (
/// 			// .card .card-row .autofit-col
/// 		),
/// 	),
/// 	card-title: (
/// 		// .card .card-title
/// 	),
/// 	card-subtitle: (
/// 		// .card .card-subtitle
/// 	),
/// 	card-text: (
/// 		// .card .card-text
/// 	),
/// 	card-link: (
/// 		// .card .card-link
/// 	),
/// 	card-divider: (
///			// .card .card-divider
/// 	),
/// 	card-type-asset-icon: (
/// 		// .card .card-type-asset-icon
/// 		inline-item: (
/// 			// .card .card-type-asset-icon .inline-item
/// 		),
/// 		lexicon-icon: (
/// 			// .card .card-type-asset-icon > .lexicon-icon
/// 		),
/// 		sticker: (
/// 			// .card .card-type-asset-icon > .sticker
/// 			sticker-overlay: (
/// 				// .card .card-type-asset-icon > .sticker .sticker-overlay
/// 			),
/// 		),
/// 	),
/// 	dropdown-action: (
/// 		// .card .dropdown-action
/// 	),
/// )
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg: {Color | String | Null},
/// hover-bg: {Color | String | Null},
/// hover-border-color: {Color | String | List | Null},
/// hover-box-shadow: {String | List | Null},
/// hover-color: {Color | String | Null},
/// hover-text-decoration: {String | Null},
/// hover-card-title: {Map | Null},
/// hover-card-subtitle: {Map | Null},
/// hover-card-text: {Map | Null},
/// hover-card-link: {Map | Null},
/// focus-bg: {Color | String | Null},
/// focus-border-color: {Color | String | List | Null},
/// focus-box-shadow: {String | List | Null},
/// focus-color: {Color | String | Null},
/// focus-text-decoration: {String | Null},
/// focus-card-title: {Map | Null},
/// focus-card-subtitle: {Map | Null},
/// focus-card-text: {Map | Null},
/// focus-card-link: {Map | Null},
/// active-bg: {Color | String | Null},
/// active-border-color: {Color | String | List | Null},
/// active-color: {Color | String | Null},
/// active-card-title: {Map | Null},
/// active-card-subtitle: {Map | Null},
/// active-card-text: {Map | Null},
/// active-card-link: {Map | Null},
/// after-highlight: {Map | Null},

@mixin clay-card-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)),
			)
		);

		$hover: setter(map-get($map, hover), ());
		$hover: map-merge(
			$hover,
			(
				background-color:
					setter(
						map-get($map, hover-bg),
						map-get($hover, background-color)
					),
				border-color:
					setter(
						map-get($map, hover-border-color),
						map-get($hover, border-color)
					),
				box-shadow:
					setter(
						map-get($map, hover-box-shadow),
						map-get($hover, box-shadow)
					),
				color:
					setter(map-get($map, hover-color), map-get($hover, color)),
				text-decoration:
					setter(
						map-get($map, hover-text-decoration),
						map-get($hover, text-decoration)
					),
			)
		);

		$old-hover-card-title: setter(map-get($map, hover-card-title), ());
		$hover-card-title: setter(map-get($hover, card-title), ());
		$hover-card-title: map-merge($hover-card-title, $old-hover-card-title);

		$old-hover-card-subtitle: setter(
			map-get($map, hover-card-subtitle),
			()
		);
		$hover-card-subtitle: setter(map-get($hover, card-subtitle), ());
		$hover-card-subtitle: map-merge(
			$hover-card-subtitle,
			$old-hover-card-subtitle
		);

		$old-hover-card-text: setter(map-get($map, hover-card-text), ());
		$hover-card-text: setter(map-get($hover, card-text), ());
		$hover-card-text: map-merge($hover-card-text, $old-hover-card-text);

		$old-hover-card-link: setter(map-get($map, hover-card-link), ());
		$hover-card-link: setter(map-get($hover, card-link), ());
		$hover-card-link: map-merge($hover-card-link, $old-hover-card-link);

		$focus: setter(map-get($map, focus), ());
		$focus: map-merge(
			$focus,
			(
				background-color:
					setter(
						map-get($map, focus-bg),
						map-get($focus, background-color)
					),
				border-color:
					setter(
						map-get($map, focus-border-color),
						map-get($focus, border-color)
					),
				box-shadow:
					setter(
						map-get($map, focus-box-shadow),
						map-get($focus, box-shadow)
					),
				color:
					setter(map-get($map, focus-color), map-get($focus, color)),
				text-decoration:
					setter(
						map-get($map, focus-text-decoration),
						map-get($focus, text-decoration)
					),
			)
		);

		$old-focus-card-title: setter(map-get($map, focus-card-title), ());
		$focus-card-title: setter(map-get($focus, card-title), ());
		$focus-card-title: map-merge($focus-card-title, $old-focus-card-title);

		$old-focus-card-subtitle: setter(
			map-get($map, focus-card-subtitle),
			()
		);
		$focus-card-subtitle: setter(map-get($focus, card-subtitle), ());
		$focus-card-subtitle: map-merge(
			$focus-card-subtitle,
			$old-focus-card-subtitle
		);

		$old-focus-card-text: setter(map-get($map, focus-card-text), ());
		$focus-card-text: setter(map-get($focus, card-text), ());
		$focus-card-text: map-merge($focus-card-text, $old-focus-card-text);

		$old-focus-card-link: setter(map-get($map, focus-card-link), ());
		$focus-card-link: setter(map-get($focus, card-link), ());
		$focus-card-link: map-merge($focus-card-link, $old-focus-card-link);

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

		$old-active-card-title: setter(map-get($map, active-card-title), ());
		$active-card-title: setter(map-get($active, card-title), ());
		$active-card-title: map-merge(
			$active-card-title,
			$old-active-card-title
		);

		$old-active-card-subtitle: setter(
			map-get($map, active-card-subtitle),
			()
		);
		$active-card-subtitle: setter(map-get($active, card-subtitle), ());
		$active-card-subtitle: map-merge(
			$active-card-subtitle,
			$old-active-card-subtitle
		);

		$old-active-card-text: setter(map-get($map, active-card-text), ());
		$active-card-text: setter(map-get($active, card-text), ());
		$active-card-text: map-merge($active-card-text, $old-active-card-text);

		$old-active-card-link: setter(map-get($map, active-card-link), ());
		$active-card-link: setter(map-get($active, card-link), ());
		$active-card-link: map-merge($active-card-link, $old-active-card-link);

		$aspect-ratio: setter(map-get($map, aspect-ratio), ());

		$aspect-ratio-custom-control-label: setter(
			map-deep-get($aspect-ratio, custom-control, label),
			()
		);

		$checkbox: setter(map-get($map, checkbox), ());
		$checkbox: map-merge(
			$checkbox,
			(
				cursor:
					setter(
						map-get($map, checkbox-cursor),
						map-get($checkbox, cursor),
						map-get($aspect-ratio-custom-control-label, cursor)
					),
			)
		);

		$aspect-ratio-custom-control-label: map-deep-merge(
			$aspect-ratio-custom-control-label,
			$checkbox
		);

		$aspect-ratio: map-deep-merge(
			$aspect-ratio,
			(
				background-color:
					setter(
						map-get($map, aspect-ratio-bg),
						map-get($map, aspect-ratio-checkered-bg),
						map-get($aspect-ratio, background-color)
					),
				checkered-foreground-color:
					setter(
						map-get($map, aspect-ratio-checkered-fg),
						map-get($aspect-ratio, checkered-foreground-color)
					),
				border-color:
					setter(
						map-get($map, aspect-ratio-border-color),
						map-get($aspect-ratio, border-color)
					),
				border-style:
					setter(
						map-get($map, aspect-ratio-border-style),
						map-get($aspect-ratio, border-style)
					),
				border-width:
					setter(
						map-get($map, aspect-ratio-border-bottom-width),
						map-get($map, aspect-ratio-border-width),
						map-get($aspect-ratio, border-width)
					),
				horizontal:
					setter(
						map-get($map, aspect-ratio-horizontal),
						map-get($aspect-ratio, horizontal)
					),
				vertical:
					setter(
						map-get($map, aspect-ratio-vertical),
						map-get($aspect-ratio, vertical)
					),
				custom-control: (
					label: $aspect-ratio-custom-control-label,
				),
			)
		);

		$aspect-ratio-checkered-fg: map-get(
			$aspect-ratio,
			checkered-foreground-color
		);

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

		$card-row: setter(map-get($map, card-row), ());
		$card-row: map-merge(
			$card-row,
			(
				align-items:
					setter(
						map-get($map, card-row-align-items),
						map-get($card-row, align-items)
					),
			)
		);

		$card-type-asset-icon: setter(map-get($map, card-type-asset-icon), ());

		$asset-icon: setter(map-get($map, asset-icon), ());

		$asset-icon-lexicon-icon: setter(
			map-get($asset-icon, lexicon-icon),
			()
		);

		$card-type-asset-icon-lexicon-icon: setter(
			map-get($card-type-asset-icon, lexicon-icon),
			()
		);
		$card-type-asset-icon-lexicon-icon: map-merge(
			$card-type-asset-icon-lexicon-icon,
			$asset-icon-lexicon-icon
		);
		$card-type-asset-icon-lexicon-icon: map-merge(
			$card-type-asset-icon-lexicon-icon,
			(
				height:
					setter(
						map-get($map, asset-icon-lexicon-icon-height),
						map-get($card-type-asset-icon-lexicon-icon, height)
					),
				width:
					setter(
						map-get($map, asset-icon-lexicon-icon-width),
						map-get($card-type-asset-icon-lexicon-icon, width)
					),
			)
		);

		$card-type-asset-icon: map-deep-merge(
			$card-type-asset-icon,
			$asset-icon
		);
		$card-type-asset-icon: map-deep-merge(
			$card-type-asset-icon,
			(
				color:
					setter(
						map-get($map, asset-icon-color),
						map-get($card-type-asset-icon, color)
					),
				max-width:
					setter(
						map-get($map, asset-icon-max-width),
						map-get($card-type-asset-icon, max-width)
					),
				min-width:
					setter(
						map-get($map, asset-icon-min-width),
						map-get($card-type-asset-icon, min-width)
					),
				width:
					setter(
						map-get($map, asset-icon-width),
						map-get($card-type-asset-icon, width)
					),
				lexicon-icon: $card-type-asset-icon-lexicon-icon,
			)
		);

		$card-type-asset-icon-sticker: setter(
			map-get($card-type-asset-icon, sticker),
			()
		);
		$card-type-asset-icon-sticker: map-merge(
			$card-type-asset-icon-sticker,
			(
				border-radius:
					setter(
						map-get($map, asset-icon-sticker-border-radius),
						map-get($card-type-asset-icon-sticker, border-radius)
					),
				font-size:
					setter(
						map-get($map, asset-icon-sticker-font-size),
						map-get($card-type-asset-icon-sticker, font-size)
					),
			)
		);

		$dropdown-action: setter(map-get($map, dropdown-action), ());
		$dropdown-action: map-merge(
			$dropdown-action,
			(
				margin-bottom:
					setter(
						map-get($map, dropdown-action-offset-bottom),
						map-get($dropdown-action, margin-bottom)
					),
				margin-left:
					setter(
						map-get($map, dropdown-action-offset-left),
						map-get($dropdown-action, margin-left)
					),
				margin-right:
					setter(
						map-get($map, dropdown-action-offset-right),
						map-get($dropdown-action, margin-right)
					),
				margin-top:
					setter(
						map-get($map, dropdown-action-offset-top),
						map-get($dropdown-action, margin-top)
					),
			)
		);

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

			&:hover,
			&.hover {
				@include clay-css($hover);

				&::after {
					@include clay-css(map-get($hover, after));
				}

				.card-title {
					@include clay-link($hover-card-title);
				}

				.card-subtitle {
					@include clay-link($hover-card-subtitle);
				}

				.card-text {
					@include clay-link($hover-card-text);
				}

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

			&:focus,
			&.focus {
				@include clay-css($focus);

				&::after {
					@include clay-css(map-get($focus, after));
				}

				.card-title {
					@include clay-link($focus-card-title);
				}

				.card-subtitle {
					@include clay-link($focus-card-subtitle);
				}

				.card-text {
					@include clay-link($focus-card-text);
				}

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

			&:active,
			&.active {
				@include clay-css($active);

				&::after {
					@include clay-css(map-get($active, after));
				}

				.card-title {
					@include clay-link($active-card-title);
				}

				.card-subtitle {
					@include clay-link($active-card-subtitle);
				}

				.card-text {
					@include clay-link($active-card-text);
				}

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

			&:disabled,
			&.disabled {
				@include clay-css(map-get($map, disabled));

				&::after {
					@include clay-css(map-deep-get($map, disabled, after));
				}

				.card-title {
					@include clay-link(
						map-deep-get($map, disabled, card-title)
					);
				}

				.card-subtitle {
					@include clay-link(
						map-deep-get($map, disabled, card-subtitle)
					);
				}

				.card-text {
					@include clay-link(map-deep-get($map, disabled, card-text));
				}

				.card-link {
					@include clay-link(map-deep-get($map, disabled, card-link));
				}
			}

			@include clay-after-highlight-variant(
				setter(map-get($map, after-highlight), ())
			);

			&::before {
				@include clay-css(map-get($map, before));
			}

			&::after {
				@include clay-css(map-get($map, after));
			}

			&.form-check-card {
				@include clay-form-check-card-variant(
					map-get($map, form-check-card)
				);
			}

			.aspect-ratio {
				@include clay-aspect-ratio-variant(
					setter(map-get($map, aspect-ratio), ())
				);

				@if ($aspect-ratio-checkered-fg) {
					@include clay-bg-checkered($aspect-ratio-checkered-fg);
				}

				.custom-control label,
				.form-check-label {
					@include clay-css(
						map-deep-get($aspect-ratio, custom-control, label)
					);
				}

				.label {
					@include clay-label-variant(map-get($aspect-ratio, label));
				}
			}

			.aspect-ratio-item {
				@include clay-aspect-ratio-item-variant(
					setter(map-get($map, aspect-ratio-item), ())
				);
			}

			.aspect-ratio-item-top-left {
				@include clay-css(map-get($map, aspect-ratio-item-top-left));
			}

			.aspect-ratio-item-top-center {
				@include clay-css(map-get($map, aspect-ratio-item-top-center));
			}

			.aspect-ratio-item-top-right {
				@include clay-css(map-get($map, aspect-ratio-item-top-right));
			}

			.aspect-ratio-item-right-middle {
				@include clay-css(
					map-get($map, aspect-ratio-item-right-middle)
				);
			}

			.aspect-ratio-item-bottom-right {
				@include clay-css(
					map-get($map, aspect-ratio-item-bottom-right)
				);
			}

			.aspect-ratio-item-bottom-center {
				@include clay-css(
					map-get($map, aspect-ratio-item-bottom-center)
				);
			}

			.aspect-ratio-item-bottom-left {
				@include clay-css(map-get($map, aspect-ratio-item-bottom-left));
			}

			> hr {
				@include clay-css(map-get($map, hr));

				&::before {
					@include clay-css(map-deep-get($map, hr, before));
				}

				&::after {
					@include clay-css(map-deep-get($map, hr, after));
				}
			}

			.sticker {
				@include clay-sticker-variant(
					setter(map-get($map, sticker), ())
				);
			}

			.card {
				@include clay-css(map-get($map, card));
			}

			.card-header {
				@include clay-card-section-variant(map-get($map, card-header));
			}

			.card-body {
				@include clay-card-section-variant($card-body);
			}

			.card-footer {
				@include clay-card-section-variant(map-get($map, card-footer));
			}

			.card-row {
				@include clay-card-section-variant($card-row);
			}

			.card-title {
				@include clay-link(map-get($map, card-title));
			}

			.card-subtitle {
				@include clay-link(map-get($map, card-subtitle));
			}

			.card-text {
				@include clay-link(map-get($map, card-text));
			}

			.card-link {
				@include clay-link(map-get($map, card-link));
			}

			.card-divider {
				@include clay-css(map-get($map, card-divider));
			}

			.card-type-asset-icon {
				@include clay-css($card-type-asset-icon);

				.inline-item {
					@include clay-css(
						map-get($card-type-asset-icon, inline-item)
					);
				}

				> .lexicon-icon {
					@include clay-css(
						map-get($card-type-asset-icon, lexicon-icon)
					);
				}

				> .sticker {
					@include clay-css($card-type-asset-icon-sticker);

					.sticker-overlay {
						@include clay-css(
							map-get(
								$card-type-asset-icon-sticker,
								sticker-overlay
							)
						);
					}
				}
			}

			.form-check-input {
				&:hover {
					~ .card {
						@include clay-card-variant(
							map-deep-get($map, custom-control, hover, card)
						);
					}
				}

				&:focus {
					~ .card {
						@include clay-card-variant(
							map-deep-get($map, custom-control, focus, card)
						);
					}
				}

				&:active {
					~ .card {
						@include clay-card-variant(
							map-deep-get($map, custom-control, active, card)
						);
					}
				}

				&[disabled],
				&:disabled {
					~ .card {
						@include clay-card-variant(
							map-deep-get($map, custom-control, disabled, card)
						);
					}
				}

				&:checked {
					~ .card {
						@include clay-card-variant(
							map-deep-get($map, custom-control, checked, card)
						);
					}
				}

				&:indeterminate {
					~ .card {
						@include clay-card-variant(
							map-deep-get(
								$map,
								custom-control,
								indeterminate,
								card
							)
						);
					}
				}
			}

			.dropdown-action {
				@include clay-button-variant($dropdown-action);
			}
		}
	}
}

/// A mixin for creating the base component `.card-type-asset` that is used with `.image-card`, `.file-card`, `.user-card`.
/// @deprecated use the mixin `clay-card-variant` instead
/// @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
/// aspect-ratio-border-color: {Color | String | List | Null}, // Default: $card-border-color
/// aspect-ratio-border-style: {String | List | Null}, // Default: solid
/// aspect-ratio-border-bottom-width: {Number | List | Null}, // deprecated as of v2.5.1 use `aspect-ratio-border-width` instead. Default: 0 0 0.0625rem 0
/// aspect-ratio-border-width: {Number | List | Null}, // Default: $aspect-ratio-border-width
/// aspect-ratio-horizontal: {Number | Null}, // Sets the `clay-aspect-ratio` `$width`. Default: 16
/// aspect-ratio-vertical: {Number | Null}, // Sets the `clay-aspect-ratio` `$height`. Default: 9
/// card-body-padding-bottom: {Number | String | Null},
/// card-body-padding-left: {Number | String | Null},
/// card-body-padding-right: {Number | String | Null},
/// card-body-padding-top: {Number | String | Null},
/// card-row-align-items: {String | Null}, // Default: flex-start
/// checkbox-cursor: {String | Null}, // Default: $link-cursor
/// asset-icon-color: {Color | String | Null},
/// asset-icon-width: {Number | String | Null}, // Default: 22.225%
/// asset-icon-sticker-border-radius: {Number | List | Null}, // Default: 50%
/// asset-icon-sticker-font-size: {Number | String | Null}, // Default: 2vw
/// dropdown-action-offset-bottom: {Number | String | Null},
/// dropdown-action-offset-left: {Number | String | Null},
/// dropdown-action-offset-right: {Number | String | Null}, // Default: -0.5rem
/// dropdown-action-offset-top: {Number | String | Null}, // Default: -0.1875rem
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-card-type-asset($map) {
	$enabled: setter(map-get($map, enabled), true);

	$aspect-ratio: setter(map-get($map, aspect-ratio), ());
	$aspect-ratio: map-merge(
		$aspect-ratio,
		(
			border-color:
				setter(
					map-get($map, aspect-ratio-border-color),
					map-get($aspect-ratio, border-color),
					if(
						variable-exists(card-border-color),
						$card-border-color,
						if(
							variable-exists(cadmin-card-border-color),
							$cadmin-card-border-color,
							null
						)
					)
				),
			border-style:
				setter(
					map-get($map, aspect-ratio-border-style),
					map-get($aspect-ratio, border-style),
					solid
				),
			border-width:
				setter(
					map-get($map, aspect-ratio-border-bottom-width),
					map-get($map, aspect-ratio-border-width),
					map-get($aspect-ratio, border-width),
					0 0 0.0625rem 0
				),
			horizontal:
				setter(
					map-get($map, aspect-ratio-horizontal),
					map-get($aspect-ratio, horizontal),
					16
				),
			vertical:
				setter(
					map-get($map, aspect-ratio-vertical),
					map-get($aspect-ratio, vertical),
					9
				),
		)
	);

	$aspect-ratio-horizontal: map-get($aspect-ratio, horizontal);
	$aspect-ratio-vertical: map-get($aspect-ratio, vertical);

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

	$card-row: setter(map-get($map, card-row), ());
	$card-row: map-merge(
		$card-row,
		(
			align-items:
				setter(
					map-get($map, card-row-align-items),
					map-get($card-row, align-items),
					flex-start
				),
		)
	);

	$checkbox: setter(map-get($map, checkbox), ());
	$checkbox: map-merge(
		$checkbox,
		(
			cursor:
				setter(
					map-get($map, checkbox-cursor),
					map-get($checkbox, cursor),
					if(
						variable-exists(link-cursor),
						$link-cursor,
						if(
							variable-exists(cadmin-link-cursor),
							$cadmin-link-cursor,
							null
						)
					)
				),
		)
	);

	$card-type-asset-icon: setter(map-get($map, card-type-asset-icon), ());
	$card-type-asset-icon: map-merge(
		$card-type-asset-icon,
		(
			color:
				setter(
					map-get($map, asset-icon-color),
					map-get($card-type-asset-icon, color)
				),
			width:
				setter(
					map-get($map, asset-icon-width),
					map-get($card-type-asset-icon, width),
					22.225%
				),
		)
	);

	$card-type-asset-icon-sticker: setter(
		map-get($card-type-asset-icon, sticker),
		()
	);
	$card-type-asset-icon-sticker: map-merge(
		$card-type-asset-icon-sticker,
		(
			border-radius:
				setter(
					map-get($map, asset-icon-sticker-border-radius),
					map-get($card-type-asset-icon-sticker, border-radius),
					50%
				),
			font-size:
				setter(
					map-get($map, asset-icon-sticker-font-size),
					map-get($card-type-asset-icon-sticker, font-size),
					2vw
				),
		)
	);

	$dropdown-action: setter(map-get($map, dropdown-action), ());
	$dropdown-action: map-merge(
		$dropdown-action,
		(
			margin-bottom:
				setter(
					map-get($map, dropdown-action-offset-bottom),
					map-get($dropdown-action, margin-bottom)
				),
			margin-left:
				setter(
					map-get($map, dropdown-action-offset-left),
					map-get($dropdown-action, margin-left)
				),
			margin-right:
				setter(
					map-get($map, dropdown-action-offset-right),
					map-get($dropdown-action, margin-right),
					-0.5rem
				),
			margin-top:
				setter(
					map-get($map, dropdown-action-offset-top),
					map-get($dropdown-action, margin-top),
					-0.1875rem
				),
		)
	);

	@if ($enabled) {
		.aspect-ratio {
			@include clay-css($aspect-ratio);

			@if ($aspect-ratio-horizontal and $aspect-ratio-vertical) {
				@include clay-aspect-ratio(
					$aspect-ratio-horizontal,
					$aspect-ratio-vertical
				);
			}

			.custom-control label,
			.form-check-label {
				bottom: 0;
				cursor: map-get($checkbox, cursor);
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

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

		.card-row {
			@include clay-css($card-row);
		}

		.card-type-asset-icon {
			@include clay-css($card-type-asset-icon);

			.inline-item {
				bottom: 0;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
			}

			> .lexicon-icon {
				height: 100%;
				width: 100%;
			}

			> .sticker {
				@include clay-css($card-type-asset-icon-sticker);
			}

			.sticker-overlay {
				@include border-radius(
					map-get($card-type-asset-icon-sticker, border-radius)
				);
			}
		}

		.dropdown-action {
			@include clay-css($dropdown-action);
		}
	}
}

/// A mixin to create `.card-type-asset` variants. This mixin is used by `.image-card`, `.file-card`, `.user-card`.
/// @deprecated use the mixin `clay-card-variant` instead
/// @param {Map} $map - A map of key-value pairs. The keys are defined in the mixin. Example below:
/// @example
/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
/// aspect-ratio-bg: {Color | String | Null},
/// aspect-ratio-checkered-fg: {Color | Null}, // Pass parameter to `clay-bg-checkered` mixin
/// aspect-ratio-checkered-bg: {Color},
/// asset-icon-color: {Color | String | Null},
/// asset-icon-max-width: {Number | String | Null},
/// asset-icon-min-width: {Number | String | Null},
/// asset-icon-width: {Number | String | Null},
/// asset-icon-lexicon-icon-height: {Number | String | Null},
/// asset-icon-lexicon-icon-width: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

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

	$base: setter($map, ());

	$aspect-ratio: setter(map-get($map, aspect-ratio), ());
	$aspect-ratio: map-merge(
		$aspect-ratio,
		(
			background-color:
				setter(
					map-get($map, aspect-ratio-bg),
					map-get($map, aspect-ratio-checkered-bg),
					map-get($aspect-ratio, background-color)
				),
			checkered-foreground-color:
				setter(
					map-get($map, aspect-ratio-checkered-fg),
					map-get($aspect-ratio, checkered-foreground-color)
				),
		)
	);

	$aspect-ratio-checkered-fg: map-get(
		$aspect-ratio,
		checkered-foreground-color
	);

	$asset-icon: setter(map-get($map, asset-icon), ());
	$asset-icon: map-merge(
		$asset-icon,
		(
			color:
				setter(
					map-get($map, asset-icon-color),
					map-get($asset-icon, color)
				),
			max-width:
				setter(
					map-get($map, asset-icon-max-width),
					map-get($asset-icon, max-width)
				),
			min-width:
				setter(
					map-get($map, asset-icon-min-width),
					map-get($asset-icon, min-width)
				),
			width:
				setter(
					map-get($map, asset-icon-width),
					map-get($asset-icon, width)
				),
		)
	);

	$asset-icon-lexicon-icon: setter(map-get($asset-icon, lexicon-icon), ());
	$asset-icon-lexicon-icon: map-merge(
		$asset-icon-lexicon-icon,
		(
			height:
				setter(
					map-get($map, asset-icon-lexicon-icon-height),
					map-get($asset-icon-lexicon-icon, height)
				),
			width:
				setter(
					map-get($map, asset-icon-lexicon-icon-width),
					map-get($asset-icon-lexicon-icon, width)
				),
		)
	);

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

		.aspect-ratio {
			@include clay-css($aspect-ratio);

			@if ($aspect-ratio-checkered-fg) {
				@include clay-bg-checkered($aspect-ratio-checkered-fg);
			}
		}

		.card-type-asset-icon {
			@include clay-css($asset-icon);

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

/// A mixin for creating the base component `.card-type-directory`.
/// @deprecated use the mixin `clay-card-variant` instead
/// @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
/// card-body-padding-bottom: {Number | String | Null},
/// card-body-padding-left: {Number | String | Null},
/// card-body-padding-right: {Number | String | Null},
/// card-body-padding-top: {Number | String | Null},
/// sticker-font-size: {Number | String | Null},
/// sticker-line-height: {Number | String | Null},
/// sticker-size: {Number | String | Null},
/// dropdown-action-offset-bottom: {Number | String | Null},
/// dropdown-action-offset-left: {Number | String | Null},
/// dropdown-action-offset-right: {Number | String | Null}, // Default: -0.5rem
/// dropdown-action-offset-top: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-card-type-directory($map) {
	$enabled: setter(map-get($map, enabled), true);

	$base: setter($map, ());

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

	$sticker: setter(map-get($map, sticker), ());
	$sticker: map-merge(
		$sticker,
		(
			font-size:
				setter(
					map-get($map, sticker-font-size),
					map-get($sticker, font-size)
				),
			height:
				setter(map-get($map, sticker-size), map-get($sticker, height)),
			line-height:
				setter(
					map-get($map, sticker-line-height),
					map-get($map, sticker-size),
					map-get($sticker, line-height)
				),
			width: setter(map-get($map, sticker-size), map-get($sticker, width)),
		)
	);

	$sticker-size: map-get($map, sticker-size);

	$dropdown-action: setter(map-get($map, dropdown-action), ());
	$dropdown-action: map-merge(
		$dropdown-action,
		(
			margin-bottom:
				setter(
					map-get($map, dropdown-action-offset-bottom),
					map-get($dropdown-action, margin-bottom)
				),
			margin-left:
				setter(
					map-get($map, dropdown-action-offset-left),
					map-get($dropdown-action, margin-left)
				),
			margin-right:
				setter(
					map-get($map, dropdown-action-offset-right),
					map-get($dropdown-action, margin-right),
					-0.5rem
				),
			margin-top:
				setter(
					map-get($map, dropdown-action-offset-top),
					map-get($dropdown-action, margin-top)
				),
		)
	);

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

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

		.dropdown-action {
			@include clay-css($dropdown-action);
		}

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

/// A mixin to help create `form-check-card` variants.
/// @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
/// 	// .form-check-card
/// 	hover: (
/// 		// .form-check-card:hover
/// 		card: (
/// 			// .form-check-card:hover .card
/// 			//     @include clay-card-variant();
/// 		),
/// 	),
/// 	focus: (
/// 		// .form-check-card.focus
/// 		card: (
/// 			// .form-check-card.focus .card
/// 			//     @include clay-card-variant();
/// 		),
/// 	),
/// 	active: (
/// 		// .form-check-card.active
/// 		card: (
/// 			// .form-check-card.active .card
/// 			//     @include clay-card-variant();
/// 		),
/// 	),
/// 	checked: (
/// 		// .form-check-card.checked
/// 		card: (
/// 			// .form-check-card.checked .card
/// 			//     @include clay-card-variant();
/// 		),
/// 	),
/// 	indeterminate: (
/// 		// .form-check-card.indeterminate
/// 		card: (
/// 			// .form-check-card.indeterminate .card
/// 			//     @include clay-card-variant();
/// 		),
/// 	),
/// 	card: (
/// 		// .form-check-card .card
/// 		//     @include clay-card-variant();
/// 	),
/// 	form-check-input: (
/// 		// .form-check-card .form-check-input
/// 	),
/// 	form-check-label: (
/// 		// .form-check-card .form-check-label
/// 	),
/// 	custom-control: (
/// 		// .form-check-card .custom-control
/// 		//     @include clay-custom-control-variant();
/// 	),
/// )

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

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

			&:hover {
				.card {
					@include clay-card-variant(map-deep-get($map, hover, card));
				}
			}

			&.focus {
				.card {
					@include clay-card-variant(map-deep-get($map, focus, card));
				}
			}

			&.active {
				.card {
					@include clay-card-variant(
						map-deep-get($map, active, card)
					);
				}
			}

			&.checked {
				.card {
					@include clay-card-variant(
						map-deep-get($map, checked, card)
					);
				}
			}

			&.indeterminate {
				.card {
					@include clay-card-variant(
						map-deep-get($map, indeterminate, card)
					);
				}
			}

			.card {
				@include clay-card-variant(map-get($map, card));
			}

			.form-check-input {
				@include clay-css(map-get($map, form-check-input));
			}

			.form-check-label {
				@include clay-css(map-get($map, form-check-label));
			}

			.custom-control {
				@include clay-custom-control-variant(
					map-get($map, custom-control)
				);
			}
		}
	}
}
