////
/// @group aspectRatio
////

/// A mixin that sets the width to height ratio of an element using `padding-bottom`. This element must be `position: relative` and items nested inside this element must use `position: absolute`.
/// @param {Number} $width[1] - The ratio width (e.g., 16)
/// @param {Number} $height[1] - The ratio height (e.g., 9)
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-aspect-ratio($width: 1, $height: 1) {
	padding-bottom: calc(#{$height} / #{$width} * 100%);
}

/// A mixin that helps style a custom `aspect-ratio-item` component.
/// @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
/// bottom: {Number | String | Null},
/// color: {Color | String | Null},
/// display: {String | Null},
/// height: {Number | String | Null},
/// left: {Number | String | Null},
/// max-height: {Number | String | Null},
/// max-width: {Number | String | Null},
/// overflow: {String | Null},
/// position: {String | Null},
/// right: {Number | String | Null},
/// top: {Number | String | Null},
/// width: {Number | String | Null},
/// word-wrap: {String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

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

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

/// A mixin that styles an aspect ratio container.
/// @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
/// horizontal: {Number | Null}, // Sets the `clay-aspect-ratio` `$width` (e.g., 16)
/// vertical: {Number | Null}, // Sets the `clay-aspect-ratio` `$height` (e.g., 9)
/// lexicon-icon-height: {Number | String | Null}, // deprecated use Sass map `lexicon-icon` instead
/// lexicon-icon-margin-top: {Number | String | Null}, // deprecated use Sass map `lexicon-icon` instead
/// lexicon-icon-width: {Number | String | Null}, // deprecated use Sass map `lexicon-icon` instead
/// @todo
/// - Add @example
/// - Add @link to documentation

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

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

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

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

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

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

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