////
/// @group globals
////

/// A mixin that outputs a CSS property based on the `key: value` pair passed to
/// the mixin. Outputs nothing if no `key: value` pairs are passed. Prevent a
/// Clay CSS Sass map from outputting properties with
/// `$the-variable: (enabled: false);`
/// @param {Map} $map - A map of `key: value` pairs.

@mixin clay-css($map) {
	@if (type-of($map) == 'map') {
		$properties: (
			'-moz-appearance',
			'-moz-osx-font-smoothing',
			'-ms-overflow-style',
			'-webkit-appearance',
			'-webkit-font-smoothing',
			'-webkit-overflow-scrolling',
			'-webkit-tap-highlight-color',
			'-webkit-text-size-adjust',
			'align-content',
			'align-items',
			'align-self',
			'animation',
			'animation-delay',
			'animation-direction',
			'animation-duration',
			'animation-fill-mode',
			'animation-iteration-count',
			'animation-name',
			'animation-play-state',
			'animation-timing-function',
			'backface-visibility',
			'background',
			'background-attachment',
			'background-blend-mode',
			'background-clip',
			'background-color',
			'background-image',
			'background-origin',
			'background-position',
			'background-repeat',
			'background-size',
			'border',
			'border-bottom',
			'border-bottom-color',
			'border-bottom-left-radius',
			'border-bottom-right-radius',
			'border-bottom-style',
			'border-bottom-width',
			'border-collapse',
			'border-color',
			'border-image',
			'border-image-outset',
			'border-image-repeat',
			'border-image-slice',
			'border-image-source',
			'border-image-width',
			'border-left',
			'border-left-color',
			'border-left-style',
			'border-left-width',
			'border-radius',
			'border-right',
			'border-right-color',
			'border-right-style',
			'border-right-width',
			'border-spacing',
			'border-style',
			'border-top',
			'border-top-color',
			'border-top-left-radius',
			'border-top-right-radius',
			'border-top-style',
			'border-top-width',
			'border-width',
			'bottom',
			'box-shadow',
			'box-sizing',
			'caption-side',
			'clear',
			'clip',
			'-webkit-clip-path',
			'clip-path',
			'color',
			'column-count',
			'column-fill',
			'column-gap',
			'column-rule',
			'column-rule-color',
			'column-rule-style',
			'column-rule-width',
			'column-span',
			'column-width',
			'columns',
			'content',
			'counter-increment',
			'counter-reset',
			'cursor',
			'direction',
			'display',
			'empty-cells',
			'fill',
			'filter',
			'flex',
			'flex-basis',
			'flex-direction',
			'flex-flow',
			'flex-grow',
			'flex-shrink',
			'flex-wrap',
			'float',
			'font',
			'font-family',
			'font-kerning',
			'font-size',
			'font-stretch',
			'font-style',
			'font-variant',
			'font-weight',
			'grid',
			'grid-area',
			'grid-auto-columns',
			'grid-auto-flow',
			'grid-auto-rows',
			'grid-column',
			'grid-column-end',
			'grid-column-gap',
			'grid-column-start',
			'grid-gap',
			'grid-row',
			'grid-row-end',
			'grid-row-gap',
			'grid-row-start',
			'grid-template',
			'grid-template-areas',
			'grid-template-columns',
			'grid-template-rows',
			'height',
			'justify-content',
			'left',
			'letter-spacing',
			'line-height',
			'list-style',
			'list-style-image',
			'list-style-position',
			'list-style-type',
			'margin',
			'margin-bottom',
			'margin-left',
			'margin-right',
			'margin-top',
			'-webkit-mask',
			'-webkit-mask-clip',
			'-webkit-mask-composite',
			'-webkit-mask-image',
			'-webkit-mask-mode',
			'-webkit-mask-origin',
			'-webkit-mask-position',
			'-webkit-mask-repeat',
			'-webkit-mask-size',
			'mask',
			'mask-clip',
			'mask-composite',
			'mask-image',
			'mask-mode',
			'mask-origin',
			'mask-position',
			'mask-repeat',
			'mask-size',
			'max-height',
			'max-width',
			'min-height',
			'min-width',
			'object-fit',
			'object-position',
			'opacity',
			'order',
			'outline',
			'outline-color',
			'outline-offset',
			'outline-style',
			'outline-width',
			'overflow',
			'overflow-x',
			'overflow-y',
			'padding',
			'padding-bottom',
			'padding-left',
			'padding-right',
			'padding-top',
			'page-break-after',
			'page-break-before',
			'page-break-inside',
			'perspective',
			'perspective-origin',
			'pointer-events',
			'position',
			'resize',
			'right',
			'scroll-behavior',
			'scrollbar-width',
			'table-layout',
			'text-align',
			'text-decoration',
			'text-decoration-color',
			'text-decoration-line',
			'text-decoration-skip-ink',
			'text-decoration-style',
			'text-decoration-thickness',
			'text-underline-offset',
			'text-underline-position',
			'text-indent',
			'text-justify',
			'text-overflow',
			'text-shadow',
			'text-transform',
			'top',
			'touch-action',
			'transform',
			'transform-origin',
			'transform-style',
			'transition',
			'transition-delay',
			'transition-duration',
			'transition-property',
			'transition-timing-function',
			'vertical-align',
			'visibility',
			'white-space',
			'width',
			'will-change',
			'word-break',
			'word-spacing',
			'writing-mode',
			'z-index'
		);

		$enabled: setter(map-get($map, enabled), true);

		@if ($enabled) {
			@each $key, $value in $map {
				@if ($value == clay-unset) {
					$value: null;
				}

				@if (starts-with($key, '--')) {
					#{$key}: $value;
				}

				@if ($key == 'appearance') {
					-moz-appearance: $value;
					-webkit-appearance: $value;

					&::-ms-expand {
						display: $value;
					}

					appearance: $value;
				} @else if ($key == 'content') {
					content: $value;
				} @else if ($key == 'word-wrap') {
					overflow-wrap: $value;
					word-wrap: $value;
				} @else if ($key == 'overflow-wrap') {
					overflow-wrap: $value;
					word-wrap: $value;
				} @else if ($key == 'transition') {
					transition: $value;

					@if ($value != 'none' and $value != null) {
						@media (prefers-reduced-motion: reduce) {
							transition: none;
						}
					}
				} @else if ($key == 'user-select') {
					-ms-user-select: $value;
					-moz-user-select: $value;
					-webkit-user-select: $value;
					user-select: $value;
				} @else if (index($properties, $key)) {
					#{$key}: #{$value};
				}
			}
		}
	}
}
