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

/// 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;
	}
}