:root {
	--scale: min(20dvw, 300px);
	--circle-scale: 0.85;
	--animation-speed: 0.5s;

	--button-border-style: calc(var(--scale) / 50) solid;

	--sun-color: radial-gradient(ellipse at top, #FEE25A 23%, #FDB443 58%, #FC842C 85%, #FB4F13 95%);
	--day-border-color: #101010;
	--day-weather-color: linear-gradient(to right, #8fe0f0 50%, hsl(from #8fe0f0 h s calc(l - 30)));
	--day-cloud-color: #ffffff;

	--moon-color: #a0a0a9;
	--night-border-color: #a0a0a9;
	--night-weather-color: linear-gradient(to right, #101010 10%, #303030);
	--night-cloud-color: #6f6f6f;

	--day-cloud-0-pos: 750%;
	--day-cloud-1-pos: 450%;
	--day-cloud-2-pos: 675%;

	--cloud-size: calc(var(--scale) / 5);
	--height: var(--scale);
	--width: calc(var(--scale) * 2);
}

/*
 * --------------------------------------
 *					main
 * --------------------------------------
 */

.lb-switch {
	width: var(--width);
	height: var(--height);

	border: var(--button-border-style);
	border-radius: 999999px;

	position: relative;

	display: flex;
	align-items: center;
}

.lb-switch-inner {
	width: var(--width);
	height: var(--height);

	position: relative;

	display: flex;
	align-items: center;
	border-radius: 999999px;

	clip-path: xywh(0 0 var(--width) var(--height) round 999999px);
}

.lb-switch-inner::before {
	content: "";

	position: absolute;

	opacity: 0;
	left: calc(-1 * var(--scale));
	bottom: 0;

	display: block;

	width: calc(var(--width) * 2);
	height: var(--width);

	background: linear-gradient(
			to right,
			#8fe0f0 25%,
			#8fe0f0 50%,
			hsl(from #8fe0f0 h s calc(l - 30)) 75%,
			hsl(from #8fe0f0 h s calc(l - 30)) 100%
	);
}

.lb-switch .lb-switch-circle {
	position: absolute;

	width: calc(var(--height) * var(--circle-scale));
	height: calc(var(--height) * var(--circle-scale));

	margin-left: calc(var(--height) * (1 - var(--circle-scale)) / 2);
	margin-right: calc(var(--height) * (1 - var(--circle-scale)) / 2);

	border-radius: 999999px;
	z-index: 5;
}

.lb-switch.on .lb-switch-circle {
	left: calc(var(--height) * var(--circle-scale) + var(--height) * (1 - var(--circle-scale)));
}

.lb-switch.off .lb-switch-circle {
	left: 0;
}

/*
 * ----------------------------------------
 * 					clouds
 * ----------------------------------------
 */

#clouds {
	position: absolute;
	z-index: 10;
}

.cloud {
	width: var(--cloud-size);
	height: var(--cloud-size);
	position: relative;

	outline: 1px solid;
	border-radius: 999999px;
}

.cloud::before, .cloud::after {
	content: "";
	width: 1px;
	height: 1px;

	position: absolute;
	bottom: calc(-1 * var(--cloud-size) / 2);

	border-top: var(--cloud-size) solid;
	border-top-left-radius: 99999px;
	border-top-right-radius: 99999px;
}

.cloud::before {
	left: calc(-1 * var(--cloud-size) / 2);

	border-left: var(--cloud-size) solid;
	border-bottom-left-radius: 99999px;
}

.cloud::after {
	right: calc(-1 * var(--cloud-size) / 2);

	border-right: var(--cloud-size) solid;
	border-bottom-right-radius: 99999px;
}

.lb-switch .cloud {
	left: 0;
	bottom: 0;
}

/*
 * ---------------------------------------
 *					stars
 * ---------------------------------------
*/

#stars {
	position: absolute;
}

.star {
	width: calc(var(--scale) / 10);
	height: calc(var(--scale) / 10);

	position: relative;

	background: radial-gradient(
			closest-side circle at center,
			#ffffff9f 15%,
			#ffffff50 30%,
			#ffffff30 40%,
			transparent 100%
	);
	filter: blur(calc(var(--scale) / 350));
	border-radius: 99999999px;
}

.star::before, .star::after {
	content: "";
	width: 1px;
	height: 1px;

	display: inline-block;
	position: absolute;

	border-radius: 50%;
}

.star::before {
	left: -50%;
	top: 50%;

	border-left: calc(var(--scale) / 10) solid #ffffff50;
	border-right: calc(var(--scale) / 10) solid #ffffff50;

	border-bottom: 1px solid #ffffffff;
}

.star::after {
	left: 50%;
	top: -50%;

	border-bottom: calc(var(--scale) / 10) solid #ffffff50;
	border-top: calc(var(--scale) / 10) solid #ffffff50;

	border-left: 1px solid #ffffffff;
}

#star-0 {
	left: 350%;
}

#star-1 {
	margin-top: 50%;
	left: 625%;
}

#star-2 {
	margin-top: 150%;
	left: 700%;
}

#star-3 {
	margin-top: 100%;
	left: 850%;
}

/*
 * -------------------------------------
 * 					day
 * -------------------------------------
 */

.lb-switch.off {
	background: var(--day-weather-color);
	border-color: var(--day-border-color);
}

.lb-switch.off .star {
	opacity: 0;
}

.lb-switch.off .lb-switch-circle {
	background: var(--sun-color);
}

.lb-switch .cloud, .lb-switch .cloud::before, .lb-switch .cloud::after {
	outline-color: var(--day-cloud-color);
	background-color: var(--day-cloud-color);
	border-color: var(--day-cloud-color);
}

/* cloud positions */

.lb-switch #cloud-0 {
	left: var(--day-cloud-0-pos);
}

.lb-switch #cloud-1 {
	left: var(--day-cloud-1-pos);
}

.lb-switch #cloud-2 {
	left: var(--day-cloud-2-pos);
}

.lb-switch #cloud-3 {
	position: absolute;
	margin-bottom: 50%;
	opacity: 0;
}

/*
 * ---------------------------------------
 *					night
 * ---------------------------------------
 */

.lb-switch.on {
	background: var(--night-weather-color);
	border-color: var(--night-border-color);
}

.lb-switch.on .lb-switch-circle {
	background: var(--moon-color);
}

.lb-switch.on .cloud {
	opacity: 0;
}

.lb-switch.on #cloud-3 {
	opacity: 100%;
	left: 150%;
}

.lb-switch #cloud-3, .lb-switch #cloud-3::before, .lb-switch #cloud-3::after {
	outline-color: var(--night-cloud-color) !important;
	background-color: var(--night-cloud-color) !important;
	border-color: var(--night-cloud-color) !important;
}

/*
 * --------------------------------------------
 * 					animations
 * --------------------------------------------
 */

.lb-switch.on {
	animation: var(--animation-speed) ease-in 1 normal lb-main-switch-turn-on;
}

.lb-switch.on .lb-switch-circle {
	animation: var(--animation-speed) ease-in 1 normal lb-switch-turn-on;
}

.lb-switch.on .lb-switch-inner::before {
	animation: var(--animation-speed) ease-in 1 normal lb-switch-bg-turn-on;
}

.lb-switch.on .cloud {
	animation: var(--animation-speed) ease-in 1 normal lb-clouds-turn-on;
}

.lb-switch.on #cloud-3 {
	animation: var(--animation-speed) ease-in 1 normal lb-switch-cloud-turn-on;
}

.lb-switch.on .star {
	animation: var(--animation-speed) ease-in 1 normal lb-fade-in;
}




.lb-switch.off {
	animation: var(--animation-speed) ease-in 1 normal lb-main-switch-turn-off;
}

.lb-switch.off .lb-switch-circle {
	animation: var(--animation-speed) ease-in 1 normal lb-switch-turn-off;
}

.lb-switch.off .lb-switch-inner::before {
	animation: var(--animation-speed) ease-in 1 normal lb-switch-bg-turn-off;
}

.lb-switch.off .cloud {
	animation: var(--animation-speed) ease-in 1 normal lb-clouds-turn-off;
}

.lb-switch.off #cloud-3 {
	animation: var(--animation-speed) ease-in 1 normal lb-switch-cloud-turn-off;
}

.lb-switch.off .star {
	animation: var(--animation-speed) ease-in 1 normal lb-fade-out;
}



@keyframes lb-main-switch-turn-on {
	from {
		border-color: var(--day-border-color);
	}
	to {
		border-color: var(--night-border-color);
	}
}

@keyframes lb-main-switch-turn-off {
	from {
		border-color: var(--night-border-color);
		background: var(--night-weather-color);
	}
	to {
		border-color: var(--day-border-color);
		background: var(--night-weather-color);
	}
}



@keyframes lb-switch-turn-on {
	from {
		left: 0;
		background: var(--sun-color);
		filter: contrast(1) grayscale(0);
	}
	90% {
		background: var(--sun-color);
		filter: contrast(0) grayscale(1);
	}
	to {
		background: radial-gradient(var(--moon-color), var(--moon-color));
		left: calc(var(--height) * var(--circle-scale) + var(--height) * (1 - var(--circle-scale)));
		filter: grayscale(0.8);
	}
}

@keyframes lb-switch-turn-off {
	from {
		left: calc(var(--height) * var(--circle-scale) + var(--height) * (1 - var(--circle-scale)));
		background: radial-gradient(var(--moon-color), var(--moon-color));
		filter: grayscale(0);
	}
	5% {
		filter: grayscale(0.6);
	}
	10% {
		background: var(--sun-color);
		filter: contrast(0) grayscale(1);
	}
	to {
		background: var(--sun-color);
		left: 0;
	}
}



@keyframes lb-switch-bg-turn-on {
	from {
		transform-origin: bottom center;
		transform: rotate(0deg);
		opacity: 1;
	}
	to {
		transform-origin: bottom center;
		transform: rotate(180deg);
		opacity: 1;
	}
}

@keyframes lb-switch-bg-turn-off {
	from {
		transform-origin: bottom center;
		transform: rotate(180deg);
		opacity: 1;
	}
	to {
		transform-origin: bottom center;
		transform: rotate(0deg);
		opacity: 1;
	}
}



@keyframes lb-clouds-turn-on {
	from {
		opacity: 1;
	}
	to {
		transform: translateY(calc(-1 * var(--scale)));
		opacity: 1;
	}
}

@keyframes lb-clouds-turn-off {
	from {
		bottom: var(--scale);
	}
	to {
		bottom: 0;
	}
}



@keyframes lb-switch-cloud-turn-on {
	from {
		opacity: 1;
		left: 150%;
		transform: translateY(300%);
	}
	to {
		opacity: 1;
		left: 150%;
	}
}

@keyframes lb-switch-cloud-turn-off {
	from {
		opacity: 1;
		left: 150%;
	}
	to {
		opacity: 1;
		left: 150%;
		transform: translateY(300%);
	}
}



@keyframes lb-fade-out {
	from {
		opacity: 1;
		transform: scale(1) rotate(90deg);
	}
	10% {
		transform: scale(1.5) rotate(85deg);
	}
	to {
		opacity: 1;
		transform: scale(0) rotate(0deg);
	}
}

@keyframes lb-fade-in {
	from {
		opacity: 1;
		transform: scale(0) rotate(90deg);
	}
	90% {
		transform: scale(1.5) rotate(5deg);
	}
	to {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}