////
/// @group nav
////

/// A mixin to create a `.nav` color variant.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// bg: {Color | String | Null},
/// link-bg: {Color | String | Null},
/// link-border-radius: {Number | String | List | Null},
/// link-color: {Color | String | Null},
/// link-font-weight: {Number | String | Null},
/// link-hover-bg: {Color | String | Null},
/// link-hover-color: {Color | String | Null},
/// link-focus-bg: {Color | String | Null},
/// link-focus-color: {Color | String | Null},
/// link-disabled-bg: {Color | String}, // Default: transparent
/// link-disabled-color: {Color | String}, // Default: $nav-link-disabled-color
/// link-disabled-opacity: {Number | String | Null},
/// link-active-bg: {Color | String | Null},
/// link-active-color: {Color | String | Null},
/// link-active-font-weight: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-nav-variant($map) {
	$bg: map-get($map, bg);
	$link-bg: map-get($map, link-bg);
	$link-border-radius: map-get($map, link-border-radius);
	$link-color: map-get($map, link-color);
	$link-font-weight: map-get($map, link-font-weight);
	$link-hover-bg: map-get($map, link-hover-bg);
	$link-hover-color: map-get($map, link-hover-color);
	$link-focus-bg: map-get($map, link-focus-bg);
	$link-focus-color: map-get($map, link-focus-color);
	$link-disabled-bg: setter(map-get($map, link-disabled-bg), transparent);
	$link-disabled-color: setter(map-get($map, link-disabled-color), $nav-link-disabled-color);
	$link-disabled-opacity: map-get($map, link-disabled-opacity);
	$link-active-bg: map-get($map, link-active-bg);
	$link-active-color: map-get($map, link-active-color);
	$link-active-font-weight: map-get($map, link-active-font-weight);

	background-color: $bg;

	.nav-btn.btn-unstyled,
	.nav-link {
		background-color: $link-bg;

		@include border-radius($link-border-radius);

		color: $link-color;
		font-weight: $link-font-weight;

		&:hover {
			background-color: $link-hover-bg;
			color: $link-hover-color;
		}

		&:focus,
		&.focus {
			background-color: $link-focus-bg;
			color: $link-focus-color;
		}

		&:disabled,
		&.disabled {
			background-color: $link-disabled-bg;
			color: $link-disabled-color;
			opacity: $link-disabled-opacity;
		}

		&.active {
			background-color: $link-active-bg;
			color: $link-active-color;
			font-weight: $link-active-font-weight;
		}
	}
}