<div class="slide">
	<label for="dimmer">Dimmer</label>
	<input type="range" min="0.3" max="1.0" step="0.1" value="1.0" class="dimmer" id="dimmer">
</div>
<button class="lightSwitch">Lights On!</button>
<div class="container">
	<hr>
	<div class="light"></div>
	<div class="light"></div>
	<div class="light"></div>
	<div class="light"></div>
	<div class="light"></div>
	<div class="light"></div>
	<div class="light"></div>
	<div class="light"></div>
	<div class="light"></div>
	<div class="light"></div>
</div>

body {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000 linear-gradient(transparent 5%, rgba(0, 27, 102, 0.9));
	font-size: 12px;
	font-weight: lighter;
}

label {
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	padding: 5px 10px;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	padding: 25px;
	right: 50%;

	.dimmer {
		transition: all 0.3s linear;
		-webkit-appearance: none;
		width: 100%;
		height: 5px;
		margin: 10px 0 0 0;
		opacity: 0.7;
		border-radius: 3px;
		border: 1px solid rgb(88, 136, 169);
		background: #464646;
		&:hover {
			opacity: 1;
		}
		&::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 15px;
			height: 20px;
			border-radius: 50%;
			background: #fff;
			cursor: pointer;
		}
	}
}

button {
	@extend label;
	color: #000;
	transition: all 0.3s linear;
	border: 2px solid rgba(88, 136, 169, 1);
	background: #ddd;
	position: absolute;
	top: 25px;
	right: 25px;
	border-radius: 3px;
	cursor: pointer;
	&:hover {
		background: rgba(88, 136, 169, 0.5);
		color: #ddd;
	}
}

.container {
	width: 100%;
	height: 45px;
	display: flex;
	position: relative;
	flex-direction: vertical;
	justify-content: space-evenly;

	hr {
		position: absolute;
		top: -3px;
		height: 4px;
		width: 100%;
		background-color: #103718;
		border: none;
		border-bottom: 1px solid #547c55;
		margin: 0;
	}

	.light {
		position: relative;
		z-index: 0;
		width: 20px;
		border-radius: 100%;
		transition: all 0.4s linear;
		background-image: radial-gradient(
			circle closest-side,
			transparent,
			rgba(0, 0, 0, 0.3),
			rgba(0, 0, 0, 0.7) 180%
		);
		background-color: #000;
		box-shadow: 0 0 40px 0 rgba(255, 255, 255, 0.1),
			0 20px 80px 8px rgba(15, 240, 255, 0.5);

		&:before {
			content: "";
			position: absolute;
			background: #103718
				radial-gradient(circle closest-side, transparent, rgba(0, 0, 0, 0.4) 100%);
			width: 16px;
			height: 8px;
			margin: 0;
			border-radius: 5px 5px 0 0;
			top: -1px;
			left: 9%;
		}
	}
}

const element = document.querySelector(".container"),
	// query all .light containers
	lights = document.querySelectorAll(".container .light"),
	dimmer = document.querySelector(".dimmer");

// Random colour generator
// #HEX
function getRandomHEX() {
	var letters = "0123456789ABCDEF",
		value = "#";
	for (var i = 0; i < 6; i++) {
		value += letters[Math.floor(Math.random() * 16)];
	}
	return value;
}

// RGBA()
function getRandomRGBA(alpha) {
	function numbers() {
		var x = Math.floor(Math.random() * 256);
		return x;
	}

	alpha = dimmer.value;

	// Change alpha of RGBA on dimmer change
	dimmer.oninput = () => {
		alpha.innerHTML = this.value;
	};

	return (
		"rgba(" +
		numbers() +
		", " +
		numbers() +
		", " +
		numbers() +
		", " +
		alpha /*.toFixed(1)*/ +
		")"
	);
}

function randomLights() {
	// random colours applied to each light
	lights.forEach(function (self) {
		let color = getRandomRGBA();
		self.style.backgroundColor = color;
		self.style["boxShadow"] =
			"0 0 0 rgba(255,255,255,0.2), 0 20px 100px 8px " +
			color +
			", 0 5px 50px 0 #fff";
	});
}

// button with .lightSwitch
let lightsToggle = document.querySelector(".lightSwitch");

//lights on/off toggle button
lightsToggle.addEventListener("click", () => {
	element.classList.toggle("flash");

	if (lightsToggle.innerHTML === "Lights On!") {
		lightsToggle.innerHTML = "Lights Off.";
	} else {
		lightsToggle.innerHTML = "Lights On!";
	}

	// Trigger random lights at set interval
	let random = setInterval(() => {
		randomLights();

		if (element.classList.contains("flash") === false) {
			clearInterval(random);
			//remove inline styles from all lights
			for (i = 0; i < lights.length; i++) {
				lights[i].removeAttribute("style");
			}
		}
	}, 800);
});