/**
 * @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);

		--color-text-link: var(--color);
		--color-text-link-hover: color-mix(in oklab, var(--color), var(--color-mix-hover));
		--focus-ring-color: var(--color);
	}

}
