.color-scheme {
	border: 0;
	padding: 0;
	display: flex;
	gap: var(--space-size-3xs);
	flex-direction: column;
	max-width: 25rem;
	margin-left: auto;
	text-align: right;

	legend {
		position:absolute;
		clip:rect(0 0 0 0);
	}

	input[name="color-scheme"] {
		position:absolute;
		clip:rect(0 0 0 0);
	}

	label {
		cursor: pointer;

		&:has(:not(:checked)) {
			color: var(--color-disabled);
		}

	

		&:has(:focus-visible) {
			outline: 1px solid var(--color-primary);
			outline-offset: 4px;
			border-radius: 5%;
		}


		&::before {
			font-family: "font awesome 6 free";
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			font-weight: 900;
			-webkit-font-smoothing: antialiased;
			font-size: var(--text-size-s);
		}

		&:has([value="dark"]) {
			&::before {
				content: "\f186";
			}
		}

		&:has([value="light"]) {
			&::before {
				content: "\f185";
			}
		}

		&:has([value="system"]) {
			&::before {
				content: "\f390";
			}
		}

		&:has(:checked)::before {
			text-shadow: var(--color-decoration) 1px 0 10px;
		}
	}
}

@media only screen and (max-width: 1280px) {
	.color-scheme {
		margin-right: 0;
		margin-left: auto;
		padding: 0 var(--space-size-l);
		width: 100%;
	}
}