////
/// @group Dropdowns
////

/// A mixin to create Dropdown Menu variants. You can base your variant off Bootstrap's `.dropdown-menu` class or create your own base class (e.g., `<div class="dropdown-menu my-custom-dropdown-menu"></div>` or `<div class="my-custom-dropdown-menu"></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
/// breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
/// See Mixin `clay-css` for available keys to pass into the base selector
/// mobile: {Map | Null}, // See Mixin `clay-css` for available keys
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg: {Color | String | Null}, // deprecated after 3.9.0
/// bg-clip: {String | Null}, // deprecated after 3.9.0
/// font-size-mobile: {Number | String | Null}, // deprecated after 3.9.0
/// max-height-mobile: {Number | String | Null}, // deprecated after 3.9.0
/// max-width-mobile: {Number | String | Null}, // deprecated after 3.9.0
/// @todo
/// - Add @example
/// - Add @link to documentation

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

	$breakpoint-down: map-get($map, breakpoint-down);

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

	$mobile: setter(map-get($map, mobile), ());
	$mobile: map-merge(
		$mobile,
		(
			font-size:
				setter(
					map-get($map, font-size-mobile),
					map-get($mobile, font-size)
				),
			max-height:
				setter(
					map-get($map, max-height-mobile),
					map-get($mobile, max-height)
				),
			max-width:
				setter(
					map-get($map, max-width-mobile),
					map-get($mobile, max-width)
				),
		)
	);

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

		// Firefox clips overflowing content and doesn't respect `padding-bottom` on `.dropdown-menu`

		padding-bottom: 0;

		&::after {
			padding-top: map-get($base, padding-bottom);
		}

		@if ($breakpoint-down) {
			@include media-breakpoint-down($breakpoint-down) {
				@include clay-css($mobile);
			}
		}
	}
}

/// A mixin to create Dropdown Item variants. You can base your variant off Bootstrap's `.dropdown-item` class or create your own base class (e.g., `<a class="dropdown-item my-custom-dropdown-item" href="/"></a>` or `<a class="my-custom-dropdown-item" href="/"></a>`).
/// @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
/// hover: {Map | Null}, // See Mixin `clay-css` for available keys
/// hover-c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
/// focus: {Map | Null}, // See Mixin `clay-css` for available keys
/// focus-c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
/// active: {Map | Null}, // See Mixin `clay-css` for available keys
/// active-c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
/// active-class: {Map | Null}, // See Mixin `clay-css` for available keys
/// active-class-c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
/// disabled: {Map | Null}, // See Mixin `clay-css` for available keys
/// disabled-c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
/// disabled-active: {Map | Null}, // See Mixin `clay-css` for available keys
/// autofit-row: {Map | Null}, // See Mixin `clay-css` for available keys
/// c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
/// c-inner: {Map | Null}, // Pass parameters to `clay-css` mixin
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg: {Color | String | Null}, // deprecated after 3.9.0
/// hover-bg: {Color | String | Null}, // deprecated after 3.9.0
/// hover-color: {Color | String | Null}, // deprecated after 3.9.0
/// hover-opacity: {Number | String | Null}, // deprecated after 3.9.0
/// hover-text-decoration: {String | Null}, // deprecated after 3.9.0
/// focus-bg: {Color | String | Null}, // deprecated after 3.9.0
/// focus-border-radius: {Number | String | List | Null}, // deprecated after 3.9.0
/// focus-box-shadow: {String | List | Null}, // deprecated after 3.9.0
/// focus-color: {Color | String | Null}, // deprecated after 3.9.0
/// focus-opacity: {Number | String | Null}, // deprecated after 3.9.0
/// focus-outline: {Number | String | Null}, // deprecated after 3.9.0
/// focus-text-decoration: {String | Null}, // deprecated after 3.9.0
/// active-bg: {Color | String | Null}, // deprecated after 3.9.0
/// active-border-color: {String | List | Null}, // deprecated after 3.9.0
/// active-color: {Color | String | Null}, // deprecated after 3.9.0
/// active-font-weight: {Number | String | Null}, // deprecated after 3.9.0
/// active-text-decoration: {String | Null}, // deprecated after 3.9.0
/// active-class-bg: {Color | String | Null}, // deprecated after 3.9.0
/// active-class-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// active-class-color: {Color | String | Null}, // deprecated after 3.9.0
/// active-class-font-weight: {Number | String | Null}, // deprecated after 3.9.0
/// active-class-text-decoration: {String | Null}, // deprecated after 3.9.0
/// disabled-bg: {Color | String | Null}, // deprecated after 3.9.0
/// disabled-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// disabled-box-shadow: {String | List | Null}, // deprecated after 3.9.0
/// disabled-color: {Color | String | Null}, // deprecated after 3.9.0
/// disabled-cursor: {String | Null}, // deprecated after 3.9.0
/// disabled-opacity: {Number | String | Null}, // deprecated after 3.9.0
/// disabled-outline: {Number | String | Null}, // deprecated after 3.9.0
/// disabled-pointer-events: {String | Null}, // deprecated after 3.9.0
/// disabled-text-decoration: {String | Null}, // deprecated after 3.9.0
/// disabled-active-pointer-events: {String | Null}, // deprecated after 3.9.0
/// @todo
/// - Add @example
/// - Add @link to documentation

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

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

	$hover-c-kbd-inline: setter(map-get($map, hover-c-kbd-inline), ());

	$focus: setter(map-get($map, focus), ());
	$focus: map-merge(
		$focus,
		(
			background-color:
				setter(
					map-get($map, focus-bg),
					map-get($focus, background-color)
				),
			border-radius:
				setter(
					map-get($map, focus-border-radius),
					map-get($focus, border-radius)
				),
			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)),
			opacity:
				setter(map-get($map, focus-opacity), map-get($focus, opacity)),
			outline:
				setter(map-get($map, focus-outline), map-get($focus, outline)),
			text-decoration:
				setter(
					map-get($map, focus-text-decoration),
					map-get($focus, text-decoration)
				),
		)
	);

	$focus-c-kbd-inline: setter(map-get($map, focus-c-kbd-inline), ());

	$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)),
			font-weight:
				setter(
					map-get($map, active-font-weight),
					map-get($active, font-weight)
				),
			text-decoration:
				setter(
					map-get($map, active-text-decoration),
					map-get($active, text-decoration)
				),
		)
	);

	$active-c-kbd-inline: setter(map-get($map, active-c-kbd-inline), ());

	$active-class: setter(map-get($map, active-class), ());
	$active-class: map-merge(
		$active-class,
		(
			background-color:
				setter(
					map-get($map, active-class-bg),
					map-get($active-class, background-color)
				),
			border-color:
				setter(
					map-get($map, active-class-border-color),
					map-get($active-class, border-color)
				),
			color:
				setter(
					map-get($map, active-class-color),
					map-get($active-class, color)
				),
			font-weight:
				setter(
					map-get($map, active-class-font-weight),
					map-get($active-class, font-weight)
				),
			text-decoration:
				setter(
					map-get($map, active-class-text-decoration),
					map-get($active-class, text-decoration)
				),
		)
	);

	$active-class-c-kbd-inline: setter(
		map-get($map, active-class-c-kbd-inline),
		()
	);

	$disabled: setter(map-get($map, disabled), ());
	$disabled: map-merge(
		$disabled,
		(
			background-color:
				setter(
					map-get($map, disabled-bg),
					map-get($disabled, background-color)
				),
			border-color:
				setter(
					map-get($map, disabled-border-color),
					map-get($disabled, border-color)
				),
			box-shadow:
				setter(
					map-get($map, disabled-box-shadow),
					map-get($disabled, box-shadow)
				),
			color:
				setter(map-get($map, disabled-color), map-get($disabled, color)),
			cursor:
				setter(
					map-get($map, disabled-cursor),
					map-get($disabled, cursor)
				),
			opacity:
				setter(
					map-get($map, disabled-opacity),
					map-get($disabled, opacity)
				),
			outline:
				setter(
					map-get($map, disabled-outline),
					map-get($disabled, outline)
				),
			pointer-events:
				setter(
					map-get($map, disabled-pointer-events),
					map-get($disabled, pointer-events)
				),
			text-decoration:
				setter(
					map-get($map, disabled-text-decoration),
					map-get($disabled, text-decoration)
				),
		)
	);

	$disabled-c-kbd-inline: setter(map-get($map, disabled-c-kbd-inline), ());

	$disabled-active: setter(map-get($map, disabled-active), ());
	$disabled-active: map-merge(
		$disabled-active,
		(
			pointer-events:
				setter(
					map-get($map, disabled-active-pointer-events),
					map-get($disabled-active, pointer-events)
				),
		)
	);

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

	$c-kbd-inline: setter(map-get($map, c-kbd-inline), ());

	$c-inner: setter(map-get($map, c-inner), ());
	$c-inner: map-merge(
		(
			flex-grow: 1,
			margin-bottom: math-sign(map-get($map, padding-bottom)),
			margin-left: math-sign(map-get($map, padding-left)),
			margin-right: math-sign(map-get($map, padding-right)),
			margin-top: math-sign(map-get($map, padding-top)),
			width: auto,
		),
		$c-inner
	);

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

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

			.c-kbd-inline {
				@include clay-css($hover-c-kbd-inline);
			}
		}

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

			.c-kbd-inline {
				@include clay-css($focus-c-kbd-inline);
			}
		}

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

			label {
				color: map-get($active, color);
			}

			.form-check-label {
				color: map-get($active, color);
				font-weight: map-get($active, font-weight);
			}

			.custom-control-label {
				font-weight: map-get($active, font-weight);
			}

			.c-kbd-inline {
				@include clay-css($active-c-kbd-inline);
			}
		}

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

			label {
				color: map-get($active-class, color);
			}

			.form-check-label {
				color: map-get($active-class, color);
				font-weight: map-get($active-class, font-weight);
			}

			.custom-control-label {
				font-weight: map-get($active-class, font-weight);
			}

			.c-kbd-inline {
				@include clay-css($active-class-c-kbd-inline);
			}
		}

		// Overwrite Bootstrap's Ensure active button styles are not applied to disabled buttons
		// https://github.com/twbs/bootstrap/commit/de3973b5e74058e37fd15fecc4cb7b9fd3409def

		&.btn:not([disabled]):not(.disabled):active,
		&.btn:not([disabled]):not(.disabled).active {
			&:focus {
				box-shadow: map-get($focus, box-shadow);
			}
		}

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

			label,
			.form-check-label {
				color: map-get($disabled, color);
			}

			.c-kbd-inline {
				@include clay-css($disabled-c-kbd-inline);
			}

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

		@if ($enable-c-inner) {
			.c-inner {
				@include clay-css($c-inner);
			}
		}

		&.autofit-row,
		.autofit-row {
			@include clay-css($autofit-row);
		}

		.c-kbd-inline {
			@include clay-css($c-kbd-inline);
		}

		.form-check-label {
			font-weight: map-get($map, font-weight);
		}

		.custom-control-label {
			font-weight: map-get($map, font-weight);
		}
	}
}