@import '../../styles/_partials/index';

// set theme color for light and dark mode (if only one value is passed, it's used for both)
// NOTE: use setThemeVar() on the same selector/level as setupThemeVars()
@mixin setThemeVar($propName, $light, $dark: null) {
	#{$propName + '_Light'}: #{$light};
	#{$propName + '_Dark'}: #{useDarkUnlessNull($dark, $light)};
}

// setup a light and dark css variable for each css prop name so we can effortlessly toggle between them based on the current theme
@mixin setupThemeVars($cssVars...) {
	@each $cssVarPropName in $cssVars {
		@include if-theme-light() {
			#{$cssVarPropName}: var(#{$cssVarPropName + '_Light'});
		}
		@include if-theme-dark() {
			#{$cssVarPropName}: var(#{$cssVarPropName + '_Dark'});
		}
	}
}

@function useDarkUnlessNull($if-value, $else-value) {
	@if ($if-value != null) {
		@return $if-value;
	}
	@else {
		@return $else-value;
	}
}