:root
{
	color-scheme: @xf-styleType;

	--xf-color-adjust: {{ $xf.style.getDefaultStyleType() === 'light' ? 1 : -1 }};

	<xf:foreach loop="$xf.style.getVariationVariables('default')" key="$property" value="$value">
		--xf-{$property}: ~"{$value}";
	</xf:foreach>

	<xf:foreach loop="$xf.style.getVariationVariables('default', true)" key="$property" value="$value">
		--xf-{$property}: var(--xf-{$property}--h), var(--xf-{$property}--s), var(--xf-{$property}--l), var(--xf-{$property}--a);
		--xf-{$property}--h: hue({$value});
		--xf-{$property}--s: saturation({$value});
		--xf-{$property}--l: lightness({$value});
		--xf-{$property}--a: alpha({$value});
	</xf:foreach>

	<xf:if is="$xf.style.hasAlternateStyleTypeVariation()">
		&:not([data-variation])
		{
			@media (prefers-color-scheme: {{ $xf.style.getAlternateStyleType() }})
			{
				--xf-color-adjust: {{ $xf.style.getAlternateStyleType() === 'light' ? 1 : -1 }};

				<xf:foreach loop="$xf.style.getVariationVariables($xf.style.getAlternateStyleTypeVariation())" key="$property" value="$value">
					--xf-{$property}: ~"{$value}";
				</xf:foreach>

				<xf:foreach loop="$xf.style.getVariationVariables($xf.style.getAlternateStyleTypeVariation(), true)" key="$property" value="$value">
					--xf-{$property}--h: hue({$value});
					--xf-{$property}--s: saturation({$value});
					--xf-{$property}--l: lightness({$value});
					--xf-{$property}--a: alpha({$value});
				</xf:foreach>
			}
		}
	</xf:if>

	<xf:foreach loop="$xf.style.getVariations(false)" value="$variation">
		&[data-variation="{$variation}"]
		{
			--xf-color-adjust: {{ $xf.style.getPropertyVariation('styleType', $variation, 'light') === 'light' ? 1 : -1 }};

			<xf:foreach loop="$xf.style.getVariationVariables($variation)" key="$property" value="$value">
				--xf-{$property}: ~"{$value}";
			</xf:foreach>

			<xf:foreach loop="$xf.style.getVariationVariables($variation, true)" key="$property" value="$value">
				--xf-{$property}--h: hue({$value});
				--xf-{$property}--s: saturation({$value});
				--xf-{$property}--l: lightness({$value});
				--xf-{$property}--a: alpha({$value});
			</xf:foreach>
		}
	</xf:foreach>
}