@use 'sass:list';

/// Includes a feature @media query
///
/// @param {String} $feature Feature Name
/// @group @media
/// @author Felix Scholze
/// @since v1.4.0
///
/// @example
///    @include feature(
///      'motion',
///    );
///
@mixin feature($feature: '') {
	// Error handling
	$valid-feature: ('motion', 'no-motion', 'dark', 'light');

	// Give an error if the feature is not present
	@if not list.index($valid-feature, $feature) {
		@error '❌  ===> #{$feature} is not a valide option for feature. Please use: #{$valid-feature}';
	}
	@if $feature == 'no-motion' {
		@media (prefers-reduced-motion: reduce) {
			@content;
		}
	}
	@if $feature == 'motion' {
		@media (prefers-reduced-motion: no-preference) {
			@content;
		}
	}
	@if $feature == 'dark' {
		@media (prefers-color-scheme: dark) {
			@content;
		}
	}
	@if $feature == 'light' {
		@media (prefers-color-scheme: light) {
			@content;
		}
	}
}