/**
 * @section Style Variants
 * Change how color is applied (muted vs. vivid, filled or outlined)
 */

@layer kelp.tokens {
	/**
	 * Outline with a transparent background
	 */
	.outline {
		--background-color: transparent;
		--background-color-hover: var(--color-fill-vivid);
		--background-color-active: color-mix(
			in oklab,
			var(--color-fill-vivid),
			var(--color-mix-active)
		);

		--border-color: var(--color-outline);
		--border-color-hover: color-mix(
			in oklab,
			var(--color-fill-vivid),
			var(--color-mix-hover)
		);
		--border-color-active: color-mix(
			in oklab,
			var(--color-fill-vivid),
			var(--color-mix-active)
		);

		--color: var(--color-outline);
		--color-hover: var(--color-on-vivid);
		--color-active: var(--color-on-vivid);
	}

	/**
	 * Transparent outline and background
	 */
	.plain {
		--background-color: transparent;
		--background-color-hover: var(--color-fill-muted);
		--background-color-active: var(--color-fill-accent);

		--border-color: transparent;
		--border-color-hover: var(--color-fill-muted);
		--border-color-active: var(--color-fill-accent);

		--color: var(--color-outline);
		--color-hover: var(--color-outline);
		--color-active: var(--color-outline);
	}

	/**
	 * Light background with gentle border
	 */
	.muted {
		--background-color: var(--color-fill-muted);
		--background-color-hover: var(--color-fill-accent);
		--background-color-active: color-mix(
			in oklab,
			var(--color-fill-muted),
			var(--color-mix-transparent)
		);

		--border-color: var(--color-border-muted);
		--border-color-hover: var(--color-border-accent);
		--border-color-active: color-mix(
			in oklab,
			var(--color-border-muted),
			var(--color-mix-transparent)
		);

		--color: var(--color-on-muted);
		--color-hover: var(--color-on-accent);
		--color-active: var(--color-on-muted);
	}

	/**
	 * Vivid background
	 */
	.vivid {
		--background-color: var(--color-fill-vivid);
		--background-color-hover: color-mix(
			in oklab,
			var(--color-fill-vivid),
			var(--color-mix-hover)
		);
		--background-color-active: color-mix(
			in oklab,
			var(--color-fill-vivid),
			var(--color-mix-active)
		);

		--border-color: transparent;
		--border-color-hover: transparent;
		--border-color-active: transparent;

		--color: var(--color-on-vivid);
		--color-hover: var(--color-on-vivid);
		--color-active: var(--color-on-vivid);

		--focus-ring-color: var(--color);
	}

	/**
	 * Adjust link color against dark backgrounds
	 */
	.dark :is(.muted, .callout, .fill):not(.outline, .plain),
	.vivid {
		--color-text-link: var(--color);
		--color-text-link-hover: color-mix(
			in oklab,
			var(--color),
			var(--color-mix-hover)
		);
	}
}