.toggleButton {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 1rem;
	border: 1px solid var(--border-soft);
	background: var(--surface-panel);
	color: var(--text-muted);
	box-shadow: var(--shadow-soft);
	cursor: pointer;
	transition:
		transform 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease;

	&:hover {
		transform: translateY(-1px);
		background: var(--surface-panel-strong);
		border-color: var(--border-strong);
	}

	@media (min-width: 768px) {
		width: 3rem;
		height: 3rem;
	}
}

.iconContainer {
	position: relative;
	width: 1.2rem;
	height: 1.2rem;
}

.colorIcon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		transform 700ms ease,
		opacity 300ms ease;

	svg {
		width: 1.2rem;
		height: 1.2rem;
		stroke: currentColor;
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

.moonWrapper {
	transform: rotate(90deg);
	opacity: 0;

	:global([data-color-scheme="dark"]) & {
		transform: rotate(0deg);
		opacity: 1;
	}
}

.sunWrapper {
	transform: rotate(0deg);
	opacity: 1;

	:global([data-color-scheme="dark"]) & {
		transform: rotate(-90deg);
		opacity: 0;
	}
}