@import "tokens.css";
@import "icons.css";
@import "carbon.css";
@import "../components/tooltip/tooltip.css";
@import "../../src/vue/components/support-status/support-status.css";

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
}

:focus {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

@supports selector(:focus-visible) {
	:focus {
		outline: none;
	}
}

:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

html {
	container-type: scroll-state;
	container-name: document;
}

body {
	max-width: 60em;
	padding: 1em;
	margin: auto;
	background: var(--color-bg);
	color: var(--color-text);
	font: 100%/1.5 var(--font-body);
}

a {
	color: var(--color-text-soft);
	font-weight: bold;
	text-decoration: none;
}

code {
	font-family: var(--font-mono);
}

h1,
h2 {
	margin: 1em 0 .5em;
	font-family: var(--font-heading);
	font-weight: normal;
	line-height: 1.1;
}

#content > section section section {
	h1 {
		display: flex;
		align-items: center;
		font-size: 180%;
		gap: 0.5em;
	}

	section h1 {
		color: var(--color-text-soft);
		font-size: 120%;
		font-weight: bold;
		text-transform: capitalize;
	}
}

h1 > .score {
	margin-left: auto;
	font-weight: bold;
}

.icon,
.icon-before::before,
.spec-link::before {
	content:'';
	display: inline-block;
	vertical-align: -.1em;
	font-size: max(1em, 1rem);
	width: 1em;
	height: 1em;

	background: var(--icon-color, currentColor);
	-webkit-mask: var(--icon) no-repeat center / contain;
	mask: var(--icon) no-repeat center / contain;
}

.icon-before::before,
.spec-link::before {
	margin-inline-end: .2em;
}

.spec-links {
	display: flex;
	gap: 0.3em;
}

.spec-link {
	display: flex;
	align-items: center;
	padding: .3em .4em;
	margin: -.5em 0;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	background-color: var(--spec-link-background-color);
	color: var(--spec-link-foreground-color);
	--icon-color: light-dark(color-mix(in oklab,
	var(--brand-color, currentColor), var(--spec-link-foreground-color) 75%),
	var(--brand-color, currentColor));
	border-radius: .25em;
	vertical-align: middle;

	&:hover,
	&:focus {
		outline: none;
		--background: var(--brand-color, color-mix(in-oklab, var(--spec-link-background-color), var(--color-neutral-0-100) 25%));
		background: var(--background);
		color: oklch(from var(--background) var(--text));

		&::before,
		&::after {
			--icon-color: oklch(from var(--background) var(--text));
		}
	}
}

.w3c-link {
	--icon: var(--icon-w3c);
	--brand-color:  #005a9c;
}

.mdn-link {
	--icon: var(--icon-mdn);
	--brand-color:  black;
}

.whatwg-link {
	--icon: var(--icon-whatwg);
	--brand-color: #3c790a;
}

details summary {
	> .spec-link {
		display: none;
		vertical-align: inherit;

		&::before {
			height: 18px;
			width: 18px;
			background-size: 18px 18px;
			vertical-align: -4px;
		}
	}

	&:hover,
	&:focus-within {
		> .spec-link {
			display: inline-block;
		}
	}
}

/* Logo */
body > h1 {
	position: absolute;
	inset-inline-start: 1em;
	inset-block-start: 0;
	z-index: 1;
	padding-block: .5em;
	padding-inline: .8em .6em;
	margin: 0;
	background: var(--title-background-color);
	color: var(--title-foreground-color);
	font-size: 150%;
	font-weight: 900;
	text-transform: uppercase;
	transition: .1s;
	box-shadow: 0 .4em .7em -.3em var(--color-shade);

	a {
		color: inherit;
	}

	small {
		display: block;
		text-transform: none;
		font-size: 75%;
		opacity: 0.8;
		font-weight: 600;
		letter-spacing: normal;
		word-spacing: .1em;
	}

	@container document scroll-state(scrollable: top) {
		position: fixed;
		inset-inline-start: 0;
		inset-block-start: 1em;
		transform:  rotate(-90deg) translateX(-100%);
		transform-origin: top left;
		box-shadow: -.4em 0 .7em -.3em var(--color-shade);
	}
}

#content {
	display: flex;
	gap: 2em;
}

#tests {
	flex: 2;
}

.pass {
	--color: var(--color-pass);
}

.almost-pass {
	--color: var(--color-almost-pass);
}

.slightly-buggy {
	--color: var(--color-slightly-buggy);
}

.buggy {
	--color: var(--color-buggy);
}

.very-buggy {
	--color: var(--color-very-buggy);
}

.fail {
	--color: var(--color-fail);
}

.epic-fail {
	--color: var(--color-epic-fail);
}

#tests > header {
	text-align: center;

	> h1 {
		font-size: 250%;
	}

	> h1 > strong {
		display: block;
		margin-top: .1em;
		font-size: 500%;
		line-height: .7;
	}

	> p {
		font-weight: 500;

		.progress {
			display: inline-block;
			vertical-align: -.05em;
			height: 1.2em;
			--stroke-width: 20;
		}
	}
}

details {
	margin: .3em 0;
	font: 100% var(--font-mono);
}

.feature {
	display: flex;
	gap: .5em;
	align-items: center;
	padding: .5em .6em;
	background: var(--color, var(--color-gray));
	color: oklch(from var(--color) var(--text));
	border-radius: .3em;
	position: relative;
	--progress-color: oklch(from var(--color) calc(l + 0.4) 0 0);

	.title {
		flex: 1;
	}

	.progress {
		height: 1.2lh;

		.x {
			opacity: .5;
		}
	}
}

summary.feature {
	list-style: none;
	cursor: pointer;
	--icon: var(--icon-caret);

	&::before {
		content:'';
		display: inline-block;
		vertical-align: -.1em;
		font-size: max(1em, 1rem);
		width: 1em;
		height: 1em;

		background: var(--icon-color, currentColor);
		-webkit-mask: var(--icon) no-repeat center / contain;
		mask: var(--icon) no-repeat center / contain;

		opacity: 0.6;
		transition: transform 0.2s;
	}

	&:is([open] > *)::before {
		transform: rotate(90deg);
	}
}

.feature {
	white-space: pre;
	white-space: break-spaces;
}

.feature-group,
.feature:not(.feature-group > *) {
	margin-block: .3em;
}

.feature-group > :not(summary),
li.feature {
	margin-block: .3em;
	margin-inline-start: 2em;
	font-size: 85%;
}

.feature small {
	display: block;
	opacity: .8;
}

.prefix {
	display: inline-block;
	padding: .3em .4em;
	margin: -.5em 0 -.5em .3em;
	font-family: sans-serif;
	font-size: 0.7rem;
	background: var(--prefix-background-color);
	color: var(--prefix-foreground-color);
	border-radius: .3em;
	vertical-align: middle;
}

aside {
	flex: 1;
	font-size: 85%;
	align-self: flex-start;
	position: sticky;
	top: 0;

	.caution {
		padding: 1em;
		background: var(--color-bg-loud);
		color: var(--color-text-loud);
		font-size: .85rem;
		line-height: 1.5;

		p {
			margin: 0;
		}
	}

	h1 {
		font-size: 150%;
	}

	ul {
		max-height: calc(100vh - 18em);
		overflow: auto;
		margin: .5em 0;
		padding: 0;
	}

	li {
		list-style: none;
		padding: .3em 0;
		border-bottom: 1px dotted var(--color-border);

		&:first-child {
			border-top: none;
		}

		&:last-child {
			border-bottom: none;
		}
	}
}

#specsTested li {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5em;
	padding-inline-start: .2em;

	.progress {
		--stroke-width: 20;
	}
}

footer {
	word-spacing: -1px;

	> p {
		padding: 1em 0;
		border-top: 1px solid var(--footer-border-color);
		text-align: center;
	}
}