/* feature tests */

.feature-tests {
	font-size: 85%;
	--test-border: blue;
}

.feature-tests span.test-colorfn-rgb {
	border: 1px solid rgb(50,50,100,1.0);
}

.feature-tests span.test-colorfn-hsl {
	border: 1px solid hsl(36deg 50% 60%);
}

.feature-tests span.test-colorfn-oklab {
	border: 1px solid oklab(59% 0.1 0.1);
}

.feature-tests span.test-colorfn-button {
	color: ButtonFace;
	background-color: ButtonText;
}

.feature-tests span.test-colorfn-accent {
	color: AccentColor;
	background-color: AccentColorText;
}

.feature-tests span.tests-length {
	display: inline-block;
	height: 0.5lh;
	border-top: 1px solid gray;
}

.feature-tests span.tests-length.cm {
	width: 5cm;
}

.feature-tests span.tests-length.ch {
	width: 4ch;
}

.feature-tests span.tests-length.vw {
	width: 25vw;
}

.feature-tests span.test-colorscheme {
	border: 1px solid blue;
	min-width: 2ch;
}

.feature-tests span.test-orientation {
	border: 1px solid blue;
	min-width: 2ch;
}

@media (prefers-color-scheme: light) {
	.feature-tests span.test-colorscheme:after {
		content: "light";
	}
}

@media (prefers-color-scheme: dark) {
	.feature-tests span.test-colorscheme:after {
		content: "dark";
	}
}

@media (orientation: landscape) {
	.feature-tests span.test-orientation::after {
		content: "landscape";
	}
}

@media (orientation: portrait) {
	.feature-tests span.test-orientation::after {
		content: "portrait";
	}
}

.feature-tests span.test-variable {
	border: 1px solid var(--test-border, red);
}

.feature-tests [lang="es"] {
	border: 1px solid yellow;
}

.feature-tests :lang(fr) {
	border: 1px solid blue;
}

.feature-tests span.test-content::after {
	content: attr(data-checkmark);
}

.feature-tests span.test-property[data-border] {
	border: 1px solid transparent;
	border-color: attr(data-border);
}

.feature-tests span[data-opacity] {
	--tone: 50;
	border: none;
	border: 1px solid rgb(0, 0, calc(200 + var(--tone)));
}

.feature-tests span[data-blink="yes"] {
	animation: blinker 2s step-start infinite;
	border: 1px solid blue;
}