.basic {
	color: rgb(175, 92, 174);
	color: color-mix(in lch, purple 50%, plum 50%);
}

.complex {
	color: rgba(254, 102, 0, 0.34);
	color: color(display-p3 0.9361 0.42808 0.14191 / 0.34);
	color: color-mix(
		in lch,
		purple calc(100% * sin(0.1)),
		color-mix(
			in oklch,
			#4fe calc(100% / 3),
			color(display-p3 calc(33% * 3) calc(1 / 2) -0.1) calc(100% / 3 * 2)
		) calc(20% + 4%)
	);
}

:root {
	--purple-plum: rgb(175, 92, 174);
}

@supports (color: color-mix(in lch, red, blue)) {
:root {
	--purple-plum: color-mix(in lch, purple 50%, plum 50%);
}
}

.spec-example-1 {
	color-1: rgb(175, 92, 174);
	color-1: color-mix(in lch, purple 50%, plum 50%);
	color-2: rgb(175, 92, 174);
	color-2: color-mix(in lch, purple 50%, plum);
	color-3: rgb(175, 92, 174);
	color-3: color-mix(in lch, purple, plum 50%);
	color-4: rgb(175, 92, 174);
	color-4: color-mix(in lch, purple, plum);
	color-5: rgb(175, 92, 174);
	color-5: color-mix(in lch, plum, purple);
	color-6: rgb(175, 92, 174);
	color-6: color-mix(in lch, purple 80%, plum 80%);
	color-7: rgba(175, 92, 174, 0.6);
	color-7: color-mix(in lch, purple 30%, plum 30%);
}

.spec-example-2 {
	color-1: rgb(223, 194, 121);
	color-1: color-mix(in lch, peru 40%, palegoldenrod);
}

.spec-example-3 {
	color-2: rgb(20, 134, 95);
	color-2: color-mix(in lch, teal 65%, olive);
}

.spec-example-4 {
	color-1: rgb(119, 119, 119);
	color-1: color-mix(in lch, white, black);
	color-2: rgb(188, 188, 188);
	color-2: color-mix(in xyz, white, black);
	color-3: rgb(128, 128, 128);
	color-3: color-mix(in srgb, white, black);
}

.spec-example-5 {
	color-1: rgb(184, 99, 137);
	color-1: color-mix(in xyz, rgb(82.02% 30.21% 35.02%) 75.23%, rgb(5.64% 55.94% 85.31%));
}

.spec-example-6 {
	color-1: rgb(174, 139, 255);
	color-1: color(display-p3 0.66273 0.5437 0.98509);
	color-1: color-mix(in lch, white, blue);
	/* https://github.com/w3c/csswg-drafts/issues/8609 */
	color-2: rgb(121, 164, 255);
	color-2: color(display-p3 0.49587 0.634 1);
	color-2: color-mix(in oklch, white, blue);
	color-3: rgb(128, 128, 255);
	color-3: color-mix(in srgb, white, blue);
}

.spec-example-7 {
	/* https://github.com/w3c/csswg-drafts/issues/8444 */
	color-1: rgb(156, 255, 126);
	color-1: color(display-p3 0.68002 1 0.51046);
	color-1: color-mix(in hsl, color(display-p3 0 1 0) 80%, yellow);
}

.spec-example-8 {
	color-1: rgba(137, 118, 0, 0.325);
	color-1: color-mix(in srgb, rgb(100% 0% 0% / 0.7) 25%, rgb(0% 100% 0% / 0.2));
}

.spec-example-9 {
	color-1: rgba(137, 118, 0, 0.26);
	color-1: color-mix(in srgb, rgb(100% 0% 0% / 0.7) 20%, rgb(0% 100% 0% / 0.2) 60%);
}

.wpt-mix-percents-1 {
	color-1: rgb(175, 92, 174);
	color-2: rgb(175, 92, 174);
	color-2: color-mix(in lch, purple 50%, plum 50%);
	color-3: rgb(175, 92, 174);
	color-3: color-mix(in lch, purple 55%, plum 55%);
	color-4: rgb(175, 92, 174);
	color-4: color-mix(in lch, purple 70%, plum 70%);
	color-5: rgb(175, 92, 174);
	color-5: color-mix(in lch, purple 95%, plum 95%);
	/* must be ignored */
	color-6: color-mix(in lch, purple 125%, plum 125%);
	/* must be ignored */
	color-7: color-mix(in lch, purple 9999%, plum 9999%);
}

.wpt-mix-percents-2 {
	color-1: rgb(175, 92, 174);
	color-2: rgb(175, 92, 174);
	color-2: color-mix(in lch, purple 50%, plum 50%);
	color-3: rgb(175, 92, 174);
	color-3: color-mix(in lch, purple 50%, plum);
	color-4: rgb(175, 92, 174);
	color-4: color-mix(in lch, purple, plum 50%);
	color-5: rgb(175, 92, 174);
	color-5: color-mix(in lch, purple, plum);
	color-6: rgb(175, 92, 174);
	color-6: color-mix(in lch, plum, purple);
	color-7: rgb(175, 92, 174);
	color-7: color-mix(in lch, purple 80%, plum 80%);
}

.color-mix-non-srgb-001 {
	/* rgb(188, 92, 0) */
	color-1: rgb(188, 92, 0);
	color-1: color-mix(in xyz, red, green);

	/* rgb(161, 108, 0 */
	color-2: rgb(160, 108, 0);
	color-2: color(display-p3 0.60204 0.43193 0.12323);
	color-2: color-mix(in lab, red, green);

	/* rgb(143, 117, 0) */
	color-3: rgb(140, 117, 0);
	color-3: color(display-p3 0.54471 0.46107 0);
	color-3: color-mix(in lch, red, green);

	/* rgb(89, 122, 0) */
	color-4: rgb(89, 122, 0);
	color-4: color-mix(in xyz, red, green 90%);

	/* rgb(65, 126, 0) */
	color-5: rgb(65, 126, 0);
	color-5: color(display-p3 0.3137 0.48778 0.12828);
	color-5: color-mix(in lab, red, green 90%);

	/* rgb(49, 128, 0) */
	color-6: rgb(57, 126, 0);
	color-6: color(display-p3 0.2789 0.49535 0.06321);
	color-6: color-mix(in lch, red, green 90%);

	/* rgb(243, 40, 0) */
	color-7: rgb(243, 40, 0);
	color-7: color-mix(in xyz, red 90%, green);

	/* rgb(237, 55, 0) */
	color-8: rgb(236, 56, 0);
	color-8: color(display-p3 0.85526 0.28166 0.13354);
	color-8: color-mix(in lab, red 90%, green);

	/* rgb(235, 59, 0) */
	color-9: rgb(228, 70, 0);
	color-9: color(display-p3 0.84845 0.29298 0.07064);
	color-9: color-mix(in lch, red 90%, green);
}

.transparent-rectangular {
	color-1: rgba(0, 0, 255, 0.65);
	color-1: color-mix(in srgb, transparent, blue 65%);
	color-2: rgba(0, 0, 255, 0.65);
	color-2: color-mix(in lab, transparent, blue 65%);
	color-3: rgba(0, 0, 255, 0.65);
	color-3: color-mix(in xyz, transparent, blue 65%);
}

.transparent-polar {
	color-1: rgba(0, 0, 255, 0.65);
	color-1: color-mix(in srgb, transparent, blue 65%);
	color-2: rgba(0, 0, 255, 0.65);
	color-2: color-mix(in lab, transparent, blue 65%);
	color-3: rgba(0, 0, 255, 0.65);
	color-3: color-mix(in xyz, transparent, blue 65%);
}

.zero-alpha-rectangular {
	color-1: rgba(0, 0, 255, 0.65);
	color-1: color-mix(in srgb, rgb(255 0 0 / 0), blue 65%);
	color-2: rgba(0, 0, 255, 0.65);
	color-2: color-mix(in lab, rgb(255 0 0 / 0), blue 65%);
	color-3: rgba(0, 0, 255, 0.65);
	color-3: color-mix(in xyz, rgb(255 0 0 / 0), blue 65%);
}

.zero-alpha-cylindrical {
	color-4: rgba(121, 0, 181, 0.65);
	color-4: color(display-p3 0.44 0 0.70096 / 0.65);
	color-4: color-mix(in oklch, rgb(255 0 0 / 0), blue 65%);
	color-5: rgba(148, 0, 122, 0.65);
	color-5: color(display-p3 0.54692 0 0.47541 / 0.65);
	color-5: color-mix(in lch, rgb(255 0 0 / 0), blue 65%);
	color-6: rgba(179, 0, 255, 0.65);
	color-6: color-mix(in hsl, rgb(255 0 0 / 0), blue 65%);
}

.same-color {
	color: rgb(0, 0, 255);
	color: color-mix(in srgb, blue, blue 65%);
}

.test-css-color-5-interop {
	color-1: rgba(92, 133, 74, 0.325);
	color-1: color-mix(in oklch, rgb(from red r 0 0 / 0), rgb(from hsl(180deg 80% 30% / 0.5) 0 g b) 65%)
}

.foo {
	color: rgb(123, 137, 142);
	color: color-mix(in oklab, #09232c, white 50%);
}

/* https: //github.com/w3c/csswg-drafts/issues/8794#issuecomment-1657218470 */
/* We expect these to be pure white because we are not calculating colors in memory for a real display */
.white-points {
	color-1: rgb(255, 255, 255);
	color-1: color-mix(in lab, color(srgb 1 1 1) 100%, black);
	color-2: rgb(255, 255, 255);
	color-2: color-mix(in lch, color(srgb 1 1 1) 100%, black);
	color-3: rgb(255, 255, 255);
	color-3: color-mix(in lab, color(xyz-d50 1 1 1) 100%, black);
	color-4: rgb(255, 255, 255);
	color-4: color-mix(in lch, color(xyz-d50 1 1 1) 100%, black);
	color-5: rgb(255, 255, 255);
	color-5: color(display-p3 1 1 1);
	color-5: color-mix(in lab, color(xyz-d65 1 1 1) 100%, black);
	color-6: rgb(255, 255, 255);
	color-6: color(display-p3 1 1 1);
	color-6: color-mix(in lch, color(xyz-d65 1 1 1) 100%, black);
}

.experimental-features-from-the-color-parser {
	color: color-mix(in srgb, contrast-color(pink) 30%, yellow);
}

.ignore-zero-percentage {
	color: rgba(128, 128, 128, 0);
	color: color-mix(in srgb, blue 0%, yellow 0%);
}

.display-p3-linear {
	color-1: rgb(128, 128, 168);
	color-1: color-mix(in display-p3, blue, yellow);
	color-2: rgb(188, 188, 188);
	color-2: color-mix(in display-p3-linear, blue, yellow);
	color-3: rgb(188, 164, 149);
	color-3: color-mix(in display-p3-linear, pink, green);
	color-4: rgb(0, 205, 0);
	color-4: color-mix(in display-p3-linear, lime, green);
}

.default-interpolation-space {
	color: rgb(123, 137, 142);
	color: color-mix(#09232c, white 50%);
}
