.switcher {
	position: fixed;
	right: calc(var(--pico-spacing) / 2 + var(--pico-scrollbar-width, 0px));
	bottom: var(--pico-spacing);
	width: auto;
	margin-bottom: 0;
	padding: 0.75rem;
	border-radius: 2rem;
	box-shadow: var(--pico-card-box-shadow);
	line-height: 1;
	text-align: right;
}

.switcher::after {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 0.15rem solid currentColor;
	border-radius: 50%;
	background: linear-gradient(
		to right,
		currentColor 0,
		currentColor 50%,
		transparent 50%
	);
	content: "";
	vertical-align: bottom;
	transition: transform var(--pico-transition);
}

.switcher i {
	display: inline-block;
	max-width: 0;
	padding: 0;
	overflow: hidden;
	font-style: normal;
	font-size: 0.875rem;
	white-space: nowrap;
}

.switcher:focus,
.switcher:hover {
	max-width: 100%;
	transition:
		background-color var(--pico-transition),
		border-color var(--pico-transition),
		color var(--pico-transition),
		box-shadow var(--pico-transition);
}

.switcher:hover::after {
	transform: rotate(180deg);
}

.switcher:hover i {
	max-width: 100%;
	padding: 0 calc(var(--pico-spacing) / 2) 0 calc(var(--pico-spacing) / 4);
	transition:
		max-width var(--pico-transition),
		padding var(--pico-transition);
}

.switcher:focus {
	box-shadow:
		var(--pico-card-box-shadow),
		0 0 0 0.2rem var(--pico-secondary-focus);
}

@media (min-width: 576px) {
	.switcher {
		right: calc(var(--pico-spacing) + var(--pico-scrollbar-width, 0px));
	}
}

::view-transition-old(root) {
	animation-delay: 500ms;
}

::view-transition-new(root) {
	animation: move-in 500ms;
}

@keyframes move-in {
	from {
		translate: 0 -100%;
	}
	to {
		translate: 0 0;
	}
}
/* 
@keyframes circle-in {
  from { clip-path: circle(0% at 50% 0%); }
  to { clip-path: circle(120% at 50% 0%); }
} */