.theme-toggle {
	cursor: pointer;

	input[type='checkbox'] {
		display: none;

		&:checked ~ .theme-toggle__wrapper {
			background-color: $color-white;

			.theme-toggle__circle {
				left: calc(64px - 19px - ((24px - 19px) / 2));
				background-color: $color-accent;
			}
		}
	}
}

.theme-toggle__wrapper {
	position: relative;
	width: 64px;
	height: 24px;
	border-radius: calc(24px / 2);
	background-color: $color-accent;
	transition: background-color 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
	pointer-events: none;
}

.theme-toggle__icon {
	position: absolute;
	top: calc((24px - 19px) / 2);
	width: 19px;
	height: 19px;
	display: flex;
	align-items: center;
	justify-content: center;

	svg {
		width: 12px;
		height: 12px;
	}
}

.theme-toggle__icon--left {
	left: calc((24px - 19px) / 2);
	color: $color-accent;
}

.theme-toggle__icon--right {
	right: calc((24px - 19px) / 2);
	color: $color-white;
}

.theme-toggle__circle {
	position: absolute;
	top: calc((24px - 19px) / 2);
	left: calc((24px - 19px) / 2);
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background-color: $color-white;
	transition:
		left 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8),
		background-color 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
}