:root {
	/* BLUE */
	--button-text-blue-default-background: transparent;
	--button-text-blue-default-color: var(--ds-color-blue-primary);
	--button-text-blue-hover-color: var(--ds-color-blue-primary-hover);
	--button-text-blue-active-color: var(--ds-color-blue-primary-active);
	--button-text-blue-disabled-color: color-mix(
		in srgb,
		var(--button-text-blue-default-color) 40%,
		transparent
	);
	--button-text-blue-default-border: transparent;

	/* DARK */
	--button-text-dark-default-background: transparent;
	--button-text-dark-default-color: var(--ds-theme-text-primary);
	--button-text-dark-hover-color: var(--ds-theme-text-primary-hover);
	--button-text-dark-active-color: var(--ds-theme-text-primary-active);
	--button-text-dark-disabled-color: color-mix(
		in srgb,
		var(--button-text-dark-default-color) 40%,
		transparent
	);
	--button-text-dark-default-border: transparent;

	/* RED */
	--button-text-red-default-background: transparent;
	--button-text-red-default-color: var(--ds-color-red-primary);
	--button-text-red-hover-color: var(--ds-color-red-primary-hover);
	--button-text-red-active-color: var(--ds-color-red-primary-active);
	--button-text-red-disabled-color: color-mix(
		in srgb,
		var(--button-text-red-default-color) 40%,
		transparent
	);
	--button-text-red-default-border: transparent;

	/* CYAN */
	--button-text-cyan-default-background: transparent;
	--button-text-cyan-default-color: var(--ds-color-cyan-primary);
	--button-text-cyan-hover-color: var(--ds-color-cyan-primary-hover);
	--button-text-cyan-active-color: var(--ds-color-cyan-primary-active);
	--button-text-cyan-disabled-color: color-mix(
		in srgb,
		var(--button-text-cyan-default-color) 40%,
		transparent
	);
	--button-text-cyan-default-border: transparent;
}