////
/// @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
/// bg: {Color | String | Null},
/// border-color: {Color | String | List | Null},
/// border-radius: {Number | String | List | Null},
/// border-style: {String | List | Null},
/// border-width: {Number | String | List | Null},
/// display: {String | Null},
/// flex-basis: {Number | String | Null},
/// flex-direction: {String | Null},
/// flex-grow: {Number | String | Null},
/// flex-shrink: {Number | String | Null},
/// flex-wrap: {String | Null},
/// margin-bottom: {Number | String | Null},
/// margin-left: {Number | String | Null},
/// margin-right: {Number | String | Null},
/// margin-top: {Number | String | Null},
/// padding-bottom: {Number | String | Null},
/// padding-left: {Number | String | Null},
/// padding-right: {Number | String | Null},
/// padding-top: {Number | String | Null},
/// text-align: {String | Null},
/// width: {Number | String | Null},
/// autofit-col-padding-left: {Number | String | Null},
/// autofit-col-padding-right: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

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

	$bg: map-get($map, bg);
	$border-color: map-get($map, border-color);
	$border-radius: map-get($map, border-radius);
	$border-style: map-get($map, border-style);
	$border-width: map-get($map, border-width);
	$display: map-get($map, display);
	$flex-basis: map-get($map, flex-basis);
	$flex-direction: map-get($map, flex-direction);
	$flex-grow: map-get($map, flex-grow);
	$flex-shrink: map-get($map, flex-shrink);
	$flex-wrap: map-get($map, flex-wrap);
	$margin-bottom: map-get($map, margin-bottom);
	$margin-left: map-get($map, margin-left);
	$margin-right: map-get($map, margin-right);
	$margin-top: map-get($map, margin-top);
	$padding-bottom: map-get($map, padding-bottom);
	$padding-left: map-get($map, padding-left);
	$padding-right: map-get($map, padding-right);
	$padding-top: map-get($map, padding-top);
	$text-align: map-get($map, text-align);
	$width: map-get($map, width);

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

	@if ($enabled) {
		background-color: $bg;
		border-color: $border-color;
		border-radius: $border-radius;
		border-style: $border-style;
		border-width: $border-width;
		display: $display;
		flex-basis: $flex-basis;
		flex-direction: $flex-direction;
		flex-grow: $flex-grow;
		flex-shrink: $flex-shrink;
		flex-wrap: $flex-wrap;
		margin-bottom: $margin-bottom;
		margin-left: $margin-left;
		margin-right: $margin-right;
		margin-top: $margin-top;
		padding-bottom: $padding-bottom;
		padding-left: $padding-left;
		padding-right: $padding-right;
		padding-top: $padding-top;
		text-align: $text-align;
		width: $width;

		.autofit-col {
			padding-left: $autofit-col-padding-left;
			padding-right: $autofit-col-padding-right;
		}
	}
}

/// 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 mixin styles from being output. Default: true
/// bg: {Color | String | Null},
/// border-color: {Color | String | List | Null},
/// border-style: {String | List | Null},
/// border-width: {Number | String | List | Null},
/// box-shadow: {String | List | Null},
/// cursor: {String | Null},
/// color: {Color | String | Null},
/// display: {String | Null},
/// flex-basis: {Number | String | Null},
/// flex-direction: {String | Null},
/// flex-grow: {Number | String | Null},
/// flex-shrink: {Number | String | Null},
/// margin-bottom: {Number | String | Null},
/// min-width: {Number | String | Null},
/// outline: {Number | String | Null},
/// position: {String | Null},
/// text-decoration: {String | Null},
/// transition: {String | List | Null},
/// width: {Number | String | Null},
/// word-wrap: {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}, // Pass parameters to `clay-link` mixin
/// hover-card-subtitle: {Map | Null}, // Pass parameters to `clay-link` mixin
/// hover-card-text: {Map | Null}, // Pass parameters to `clay-link` mixin
/// hover-card-link: {Map | Null}, // Pass parameters to `clay-link` mixin
/// 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}, // Pass parameters to `clay-link` mixin
/// focus-card-subtitle: {Map | Null}, // Pass parameters to `clay-link` mixin
/// focus-card-text: {Map | Null}, // Pass parameters to `clay-link` mixin
/// focus-card-link: {Map | Null}, // Pass parameters to `clay-link` mixin
/// active-bg: {Color | String | Null},
/// active-border-color: {Color | String | List | Null},
/// active-color: {Color | String | Null},
/// active-card-title: {Map | Null}, // Pass parameters to `clay-link` mixin
/// active-card-subtitle: {Map | Null}, // Pass parameters to `clay-link` mixin
/// active-card-text: {Map | Null}, // Pass parameters to `clay-link` mixin
/// active-card-link: {Map | Null}, // Pass parameters to `clay-link` mixin
/// after-highlight: {Map | Null}, // Pass parameters to `clay-after-highlight-variant` mixin
/// aspect-ratio: {Map | Null}, // Pass parameters to `clay-aspect-ratio-variant` mixin
/// aspect-ratio-item: {Map | Null}, // Pass parameters to `clay-aspect-ratio-item-variant` mixin
/// sticker: {Map | Null}, // Pass parameters to `clay-sticker-variant` mixin
/// card-header: {Map | Null}, // Pass parameters to `clay-card-section-variant` mixin
/// card-body: {Map | Null}, // Pass parameters to `clay-card-section-variant` mixin
/// card-footer: {Map | Null}, // Pass parameters to `clay-card-section-variant` mixin
/// card-row: {Map | Null}, // Pass parameters to `clay-card-section-variant` mixin
/// card-title: {Map | Null}, // Pass parameters to `clay-link` mixin
/// card-subtitle: {Map | Null}, // Pass parameters to `clay-link` mixin
/// card-text: {Map | Null}, // Pass parameters to `clay-link` mixin
/// card-link: {Map | Null}, // Pass parameters to `clay-link` mixin
/// @todo
/// - Add @example
/// - Add @link to documentation

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

	$bg: map-get($map, bg);
	$border-color: map-get($map, border-color);
	$border-style: map-get($map, border-style);
	$border-width: map-get($map, border-width);
	$box-shadow: map-get($map, box-shadow);
	$cursor: map-get($map, cursor);
	$color: map-get($map, color);
	$display: map-get($map, display);
	$flex-basis: map-get($map, flex-basis);
	$flex-direction: map-get($map, flex-direction);
	$flex-grow: map-get($map, flex-grow);
	$flex-shrink: map-get($map, flex-shrink);
	$margin-bottom: map-get($map, margin-bottom);
	$min-width: map-get($map, min-width);
	$outline: map-get($map, outline);
	$position: map-get($map, position);
	$text-decoration: map-get($map, text-decoration);
	$transition: map-get($map, transition);
	$width: map-get($map, width);
	$word-wrap: map-get($map, word-wrap);

	$hover-bg: map-get($map, hover-bg);
	$hover-border-color: map-get($map, hover-border-color);
	$hover-box-shadow: map-get($map, hover-box-shadow);
	$hover-color: map-get($map, hover-color);
	$hover-text-decoration: map-get($map, hover-text-decoration);
	$hover-card-title: setter(map-get($map, hover-card-title), ());
	$hover-card-subtitle: setter(map-get($map, hover-card-subtitle), ());
	$hover-card-text: setter(map-get($map, hover-card-text), ());
	$hover-card-link: setter(map-get($map, hover-card-link), ());

	$focus-bg: map-get($map, focus-bg);
	$focus-border-color: map-get($map, focus-border-color);
	$focus-box-shadow: map-get($map, focus-box-shadow);
	$focus-color: map-get($map, focus-color);
	$focus-text-decoration: map-get($map, focus-text-decoration);
	$focus-card-title: setter(map-get($map, focus-card-title), ());
	$focus-card-subtitle: setter(map-get($map, focus-card-subtitle), ());
	$focus-card-text: setter(map-get($map, focus-card-text), ());
	$focus-card-link: setter(map-get($map, focus-card-link), ());

	$active-bg: map-get($map, active-bg);
	$active-border-color: map-get($map, active-border-color);
	$active-color: map-get($map, active-color);
	$active-card-title: setter(map-get($map, active-card-title), ());
	$active-card-subtitle: setter(map-get($map, active-card-subtitle), ());
	$active-card-text: setter(map-get($map, active-card-text), ());
	$active-card-link: setter(map-get($map, active-card-link), ());

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

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

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

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

	$card-header: setter(map-get($map, card-header), ());

	$card-body: setter(map-get($map, card-body), ());

	$card-footer: setter(map-get($map, card-footer), ());

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

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

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

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

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

	@if ($enabled) {
		&.card,
		.card {
			background-color: $bg;
			border-color: $border-color;
			border-style: $border-style;
			border-width: $border-width;
			box-shadow: $box-shadow;
			cursor: $cursor;
			color: $color;
			display: $display;
			flex-basis: $flex-basis;
			flex-direction: $flex-direction;
			flex-grow: $flex-grow;
			flex-shrink: $flex-shrink;
			margin-bottom: $margin-bottom;
			min-width: $min-width;
			outline: $outline;
			position: $position;
			text-decoration: $text-decoration;
			transition: $transition;
			width: $width;
			word-wrap: $word-wrap;

			&:hover {
				background-color: $hover-bg;
				border-color: $hover-border-color;
				box-shadow: $hover-box-shadow;
				color: $hover-color;
				text-decoration: $hover-text-decoration;

				.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 {
				background-color: $focus-bg;
				border-color: $focus-border-color;
				box-shadow: $focus-box-shadow;
				color: $focus-color;
				text-decoration: $focus-text-decoration;

				.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 {
				background-color: $active-bg;
				border-color: $active-border-color;
				color: $active-color;

				.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);
				}
			}
		}

		@include clay-after-highlight-variant($after-highlight);

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

		.aspect-ratio-item {
			@include clay-aspect-ratio-item-variant($aspect-ratio-item);
		}

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

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

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

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

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

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

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

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

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

/// A mixin for creating the base component `.card-type-asset` that is used with `.image-card`, `.file-card`, `.user-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 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-border-color: setter(map-get($map, aspect-ratio-border-color), $card-border-color);
	$aspect-ratio-border-style: setter(map-get($map, aspect-ratio-border-style), solid);

	// The Sass map key name `aspect-ratio-border-bottom-width` is deprecated as of v2.5.1 use `aspect-ratio-border-width` instead
	$aspect-ratio-border-bottom-width: setter(map-get($map, aspect-ratio-border-bottom-width), 0 0 0.0625rem 0); // 0 0 1px 0

	$aspect-ratio-border-width: map-get($map, aspect-ratio-border-width);
	$aspect-ratio-horizontal: setter(map-get($map, aspect-ratio-horizontal), 16);
	$aspect-ratio-vertical: setter(map-get($map, aspect-ratio-vertical), 9);

	$card-body-padding-bottom: map-get($map, card-body-padding-bottom);
	$card-body-padding-left: map-get($map, card-body-padding-left);
	$card-body-padding-right: map-get($map, card-body-padding-right);
	$card-body-padding-top: map-get($map, card-body-padding-top);
	$card-row-align-items: setter(map-get($map, card-row-align-items), flex-start);

	$checkbox-cursor: setter(map-get($map, checkbox-cursor), $link-cursor);

	$asset-icon-color: map-get($map, asset-icon-color);
	$asset-icon-width: setter(map-get($map, asset-icon-width), 22.225%);
	$asset-icon-sticker-border-radius: setter(map-get($map, asset-icon-sticker-border-radius), 50%);
	$asset-icon-sticker-font-size: setter(map-get($map, asset-icon-sticker-font-size), 2vw);

	$dropdown-action-offset-bottom: map-get($map, dropdown-action-offset-bottom);
	$dropdown-action-offset-left: map-get($map, dropdown-action-offset-left);
	$dropdown-action-offset-right: setter(map-get($map, dropdown-action-offset-right), -0.5rem); // -8px
	$dropdown-action-offset-top: setter(map-get($map, dropdown-action-offset-top), -0.1875rem); // -3px

	@if ($enabled) {
		.aspect-ratio {
			border-color: $aspect-ratio-border-color;
			border-style: $aspect-ratio-border-style;
			border-width: $aspect-ratio-border-width;

			@if not $aspect-ratio-border-width {
				// `$aspect-ratio-border-bottom-width is deprecated as of v2.5.1 use `$aspect-ratio-border-width` instead
				border-width: $aspect-ratio-border-bottom-width;
			}

			@include clay-aspect-ratio($aspect-ratio-horizontal, $aspect-ratio-vertical);

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

		.card-body {
			padding-bottom: $card-body-padding-bottom;
			padding-left: $card-body-padding-left;
			padding-right: $card-body-padding-right;
			padding-top: $card-body-padding-top;
		}

		.card-row {
			align-items: $card-row-align-items;
		}

		.card-type-asset-icon {
			color: $asset-icon-color;
			width: $asset-icon-width;

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

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

			> .sticker {
				@include border-radius($asset-icon-sticker-border-radius);

				display: block;
				font-size: $asset-icon-sticker-font-size;
				padding-bottom: 100%;
				width: 100%;
			}

			.sticker-overlay {
				@include border-radius($asset-icon-sticker-border-radius);
			}
		}

		.dropdown-action {
			margin-bottom: $dropdown-action-offset-bottom;
			margin-left: $dropdown-action-offset-left;
			margin-right: $dropdown-action-offset-right;
			margin-top: $dropdown-action-offset-top;
		}
	}
}

/// A mixin to create `.card-type-asset` variants. This mixin is used by `.image-card`, `.file-card`, `.user-card`.
/// @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);

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

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

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

	@if ($enabled) {
		.aspect-ratio {
			background-color: $aspect-ratio-bg;

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

		.card-type-asset-icon {
			color: $asset-icon-color;
			max-width: $asset-icon-max-width;
			min-width: $asset-icon-min-width;
			width: $asset-icon-width;

			.lexicon-icon {
				height: $asset-icon-lexicon-icon-height;
				width: $asset-icon-lexicon-icon-width;
			}
		}
	}
}

/// A mixin for creating the base component `.card-type-directory`.
/// @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);

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

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

	$dropdown-action-offset-bottom: map-get($map, dropdown-action-offset-bottom);
	$dropdown-action-offset-left: map-get($map, dropdown-action-offset-left);
	$dropdown-action-offset-right: setter(map-get($map, dropdown-action-offset-right), -0.5rem); // -8px
	$dropdown-action-offset-top: map-get($map, dropdown-action-offset-top);

	@if ($enabled) {
		.card-body {
			padding-bottom: $card-body-padding-bottom;
			padding-left: $card-body-padding-left;
			padding-right: $card-body-padding-right;
			padding-top: $card-body-padding-top;
		}

		.dropdown-action {
			margin-bottom: $dropdown-action-offset-bottom;
			margin-left: $dropdown-action-offset-left;
			margin-right: $dropdown-action-offset-right;
			margin-top: $dropdown-action-offset-top;
		}

		.sticker {
			font-size: $sticker-font-size;
			height: $sticker-size;
			line-height: if($sticker-line-height, $sticker-line-height, $sticker-size);
			width: $sticker-size;
		}
	}
}