<div class="app">
	<div class="background"></div>
	<div class="grid"></div>
	<h1 class="title">SYNTHWAVE</h1>
	<form>
		<input style="display: none;" id="switch" type="checkbox">
		<label id="switch__label" class="label" for="switch">
			<div class="switch__sun"></div>
			<div class="switch">
				<div class="switch__content"></div>
			</div>
		</label>
	</form>
</div>

@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap");

* {
	padding: 0;
	margin: 0;
}

.app {
	font-family: "Orbitron", sans-serif;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: white;
	perspective: 18rem;
	overflow: hidden;
}

.background {
	clip-path: inset(100% 0 0 0);
	position: fixed;
	width: 100%;
	height: 100vh;
	background: linear-gradient(
		to bottom,
		#26007d 0%,
		#3503a8 50%,
		#b30699 84%,
		#ff179a 100%
	);
	transition: all 1s ease;
}

.background--active {
	clip-path: inset(0 0 0 0);
}

.title {
	z-index: 20;
	padding: 25px;
	font-size: 60px;
	text-align: center;
	color: grey;
	line-height: 1;
	transition: all 0.3s ease;
}

.title--active {
	text-shadow: 0px 3px 0px #b80799, 0px 5px 0px #b80799, 0px 0 5px #673ab7,
		0px 0 10px #673ab7, 0px 0 15px #673ab76b, 0px 0 20px #673ab74f,
		0px 0 25px #673ab766;
	color: #663399;
}

.label {
	position: relative;
}

.grid {
	opacity: 0;
	display: grid;
	position: fixed;
	width: 300%;
	height: 100vh;
	grid-template-columns: repeat(20, 1fr);
	gap: 0px 0px;
	transform: rotateX(79deg) translateZ(-150px) translateY(100%);
	perspective-origin: left;
	transition: all 1.5s ease;
}

.grid--active {
	opacity: 1;
	transform: rotateX(79deg) translateZ(-150px) translateY(0%);
}

.grid__item {
	border: solid #4dc8ff;
	box-shadow: 0 0 20px 10px #4ad9eb;
}

.switch {
	position: relative;
	width: 300px;
	border: solid 10px grey;
	padding: 10px;
	border-radius: 100px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.switch--active {
	border: solid 10px rebeccapurple;
}

.switch__content {
	height: 120px;
	width: 40%;
	border-radius: 100px;
	transform: translateX(0);
	background-color: grey;
	transition: all 0.3s ease;
}

.switch__content--active {
	transform: translateX(150%);
	background-color: rebeccapurple;
	box-shadow: 0 0 40px -5px rebeccapurple;
}

.switch__sun {
	clip-path: inset(0 0 100% 0);
	position: absolute;
	background-image: linear-gradient(to bottom, #ffff05 0%, #ff4700 50%);
	width: 600px;
	height: 600px;
	background-color: red;
	top: -270px;
	left: -135px;
	border-radius: 500px;
	transition: all 0.7s ease;
}

.switch__sun--active {
	clip-path: inset(0 0 0 0);
}

/**
 * A sexy synthwave switch only for you guys !
 * Made with all my love on Twitch.tv ! <3
 *
 * Follow me :p
 * https://twitch.tv/emilienjc
 * https://github.com/EmilienLeroy
 * https://codepen.io/emilienleroy/
 * https://twitter.com/LeroyEmilien
 */

const switchBtn = document.querySelector("#switch");
const switchLabel = document.querySelector("#switch__label");
const background = document.querySelector(".background");
const title = document.querySelector(".title");
const grid = document.querySelector(".grid");

createGrid(grid);

switchBtn.addEventListener("change", () => {
	const wrapper = switchLabel.querySelector(".switch");
	const content = switchLabel.querySelector(".switch__content");
	const sun = switchLabel.querySelector(".switch__sun");

	toggleElement(title);
	toggleElement(background);
	toggleElement(wrapper);
	toggleElement(content);
	toggleElement(sun);
	toggleElement(grid);
});

function toggleElement(el) {
	const classActive = `${el.classList[0]}--active`;

	el.classList.contains(classActive)
		? el.classList.remove(classActive)
		: el.classList.add(classActive);
}

function createGrid(grid, nbItem = 100) {
	for (let index = 0; index < nbItem; index++) {
		grid.appendChild(createGridItem());
	}
}

function createGridItem() {
	const div = document.createElement("div");
	div.classList.add("grid__item");
	return div;
}