@layer components {
	fieldset[class*="toggle"] {
		border: none;
		margin: 0;
		padding: 0;
		position: relative;
	}

	fieldset[class*="toggle"] label {
		display: block;
		font-size: .75rem;
		line-height: 1.1;
	}

	fieldset[class*="toggle"] label span {
		grid-area: text;
		margin-inline-start: calc(2em + .25rem);
	}


	fieldset[class*="toggle"] label:is(:hover, :focus-visible) {
		text-decoration: underline;
	}

	fieldset[class*="toggle"] input:focus-visible + label {
		background-color: rgb(var(--purple));
		color: rgb(var(--light-grey));
		font-weight: 700;
	}

	fieldset[class*="toggle"] input:focus-visible + label svg {
		fill: rgb(var(--light-grey, white));
	}

	fieldset[class*="toggle"] label svg {
		grid-area: icon;
		grid-row: span 2;
		min-inline-size: 1.1em;
		fill: rgb(var(--black, black));
		display: none;
		position: absolute;
		inset-block-start: 50%;
		transform: translateY(-50%);
	}

	fieldset[class*="toggle"] input#list:checked ~ label[for="list"],
	fieldset[class*="toggle"] input#grid:checked ~ label[for="grid"],
	fieldset[class*="toggle"] input#dark:checked ~ label[for="dark"],
	fieldset[class*="toggle"] input#light:checked ~ label[for="light"] {
		font-weight: 700;
	}

	fieldset[class*="toggle"] input#list:checked ~ label[for="grid"]::after,
	fieldset[class*="toggle"] input#grid:checked ~ label[for="list"]::after,
	fieldset[class*="toggle"] input#dark:checked ~ label[for="light"]::after,
	fieldset[class*="toggle"] input#light:checked ~ label[for="dark"]::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 666;
	}


	fieldset[class*="toggle"] input#list:checked ~ label[for="list"] svg,
	fieldset[class*="toggle"] input#grid:checked ~ label[for="grid"] svg,
	fieldset[class*="toggle"] input#dark:checked ~ label[for="dark"] svg,
	fieldset[class*="toggle"] input#light:checked ~ label[for="light"] svg {
		display: block;
	}

	fieldset[class*="toggle"] input {
		clip: rect(0 0 0 0); 
		clip-path: inset(100%); 
		height: 1px; 
		overflow: hidden; 
		position: absolute; 
		white-space: nowrap; 
		width: 1px; 
	}

	fieldset[class*="toggle"] label + label {
		grid-row: 2;
	}

	html:has(body[data-color-theme="dark"]),
	body[data-color-theme="dark"] {
		--front: rgb(160 165 165 / 1);
		--back: rgb(20 20 40 / 1);
	}

	@media (prefers-color-scheme: light) {
		html:has(body[data-color-theme="dark"]),
		body[data-color-theme="dark"] {
			--front: rgb(160 165 165 / 1);
			--back: rgb(20 20 40 / 1);
		}
	}

	html:has(body[data-color-theme="light"]),
	body[data-color-theme="light"] {
		--front: rgb(20 20 40 / 1);
		--back: rgb(160 165 165 / 1);
	}

	@media (prefers-color-scheme: dark) {
		html:has(body[data-color-theme="light"]),
		body[data-color-theme="light"] {
			--front: rgb(20 20 40 / 1);
			--back: rgb(160 165 165 / 1);
		}
	}

}