////
/// @group utilities
////

@mixin bg-variant($parent, $color, $ignore-warning: false) {
	#{$parent} {
		background-color: $color !important;
	}

	a#{$parent},
	button#{$parent} {
		&:hover,
		&:focus {
			background-color: clay-darken($color, 10%) !important;
		}
	}

	@include deprecate(
		'The `bg-variant` mixin',
		'v4.4.0',
		'v5',
		$ignore-warning
	);
}

@mixin bg-gradient-variant($parent, $color) {
	#{$parent} {
		background: $color
			linear-gradient(180deg, clay-mix($body-bg, $color, 15%), $color)
			repeat-x !important;
	}
}

/// A mixin for creating checkered backgrounds.
/// @param {Color} $fg-color[$gray-200] - The foreground color to use
/// @param {Color} $bg-color[null] - The background color to use
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-bg-checkered($fg-color: $gray-200, $bg-color: null) {
	background-color: $bg-color;
	background-image: linear-gradient(45deg, $fg-color 25%, transparent 25%),
		linear-gradient(-45deg, $fg-color 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, $fg-color 75%),
		linear-gradient(-45deg, transparent 75%, $fg-color 75%);
	background-position:
		0 0,
		0 10px,
		10px -10px,
		-10px 0px;
	background-size: 20px 20px;
}

/// A mixin that replaces any `*-indicator` component with another icon via `background-image` (e.g., `.modal-title-indicator`, `.dropdown-item-indicator-start`, or `.panel-header .collapse-icon-closed`).
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// indicator: {String}, // The SVG as a data URI, use clay-icon() or clay-svg-url()
/// indicator-bg-position: {List}, // Default: top 0.125rem left
/// indicator-bg-size: {Number | String | List}, // Default: 100%
/// indicator-display: {String}, // Default: inline-block
/// indicator-height: {Number | String}, // Default: #{$line-height-base}em
/// indicator-text-indent: {Number | String | Null},
/// indicator-vertical-align: {String}, // Default: middle
/// indicator-width: {Number | String}, // Default: 1em
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-indicator-bg($map) {
	$indicator: map-get($map, indicator);
	$indicator-bg-position: setter(
		map-get($map, indicator-bg-position),
		top 0.125rem left
	);
	$indicator-bg-size: setter(map-get($map, indicator-bg-size), 100%);
	$indicator-display: setter(map-get($map, indicator-display), inline-block);
	$indicator-height: setter(
		map-get($map, indicator-height),
		#{$line-height-base}em
	);
	$indicator-text-indent: map-get($map, indicator-text-indent);
	$indicator-vertical-align: setter(
		map-get($map, indicator-vertical-align),
		middle
	);
	$indicator-width: setter(map-get($map, indicator-width), 1em);

	background-image: $indicator;
	background-position: $indicator-bg-position;
	background-repeat: no-repeat;
	background-size: $indicator-bg-size;
	display: $indicator-display;
	height: $indicator-height;
	margin-top: 0;
	text-indent: $indicator-text-indent;
	vertical-align: $indicator-vertical-align;
	width: $indicator-width;

	.lexicon-icon {
		display: none;
	}
}