- var buttons = [
-  {
- 	label: 'Sleep',
-  icon: 'moon',
-		type: 'red'
- }, {
- 	label: 'Alarm',
-  icon: 'bell',
-		type: 'blue'
- }, {
- 	label: 'Data',
-  icon: 'bar-chart',
-		type: 'green'
- }, {
- 	label: 'Wifi',
-  icon: 'wifi',
-		type: 'orange'
- }, {
- 	label: 'Alerts',
-  icon: 'alert-circle',
-		type: 'yellow'
- }, {
- 	label: 'Power',
-  icon: 'power',
-		type: 'teal'
- }, {
- 	label: 'Cast',
-  icon: 'cast',
-		type: 'indigo'
- }, {
- 	label: 'Send',
-  icon: 'send',
-		type: 'purple'
- }, {
- 	label: 'Phone',
-  icon: 'phone',
-		type: 'pink'
- },
- ]

.l-grid
	each button in buttons
		.l-grid__item
			button.c-button(data-button=button.type)
				i.c-button__icon(data-feather=button.icon)
				span.c-button__label= button.label

$light-grey: #E7EEF7;

$color: $light-grey;
$lighter-5: lighten($color, 5%);
$darker-5: darken($color, 5%);
$darker-10: darken($color, 10%);
$darker-15: darken($color, 15%);
$darker-20: darken($color, 20%);
$darker-25: darken($color, 25%);
$darker-30: darken($color, 30%);

$flat: rgba(white, 1);
$flat-24: transparentize($flat, 0.76);
$flat-70: transparentize($flat, 0.30);

$states: (
	red: #F56565,
	blue: #4299E1,
	green: #48BB78,
	orange: #ED8936,
	yellow: #D69E2E,
	teal: #38B2AC,
	indigo: #667EEA,
	purple: #9F7AEA,
	pink: #ED64A6
);

@mixin transition {
	transition: all 120ms ease-out 0s;
}

html {
	font-size: 62.5%;
	box-sizing: border-box;
}

*,*:before,*:after {
	box-sizing: inherit;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	font-size: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: system-ui;
	background: $color;
}

button {
	cursor: pointer;
	color: inherit;
	font-family: inherit;
	&:active, &:focus {
		outline: 0;
	}
}

.l-grid {
	width: auto;
	margin: auto;
	display: grid;
	grid-column-gap: 4rem;
	grid-row-gap: 4rem;
	grid-template-columns: repeat(3,1fr);
	&__item {
		text-align: center;
	}
}

.c-button {
	$border-radius: 2.4rem;
	display: inline-flex;
	height: 8.8rem;
	width: 8.8rem;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: $border-radius;
	border: 0;
	color: desaturate($darker-30, 20%);
	background: transparent;
	position: relative;
	box-shadow: 0.8rem 0.8rem 2.4rem $darker-10, -0.8rem -0.8rem 2.4rem $flat, -0.2rem -0.2rem 0.2rem $flat;
	@include transition;
	&:hover {
		&:before {
			background: $flat-24;
		}
	}
	&:before {
		content: '';
		position: absolute;
		border-radius: $border-radius;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border: 2px solid transparent;
		filter: blur(2px);
		@include transition;
	}
	&:after {
		content: '';
		position: absolute;
		border-radius: $border-radius;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		@include transition;
	}
	&--active {
		background: linear-gradient(to top, $darker-5, $lighter-5);
		box-shadow: inset 0.2rem 0.2rem 0.8rem $darker-25, inset 0.8rem 0.8rem 1.6rem $darker-15, inset -0.4rem -0.4rem 0.8rem $flat, 2px 2px 8px $darker-20, -2px -2px 2px $flat-70;
		&:before {
			border-color: white;
			box-shadow: 0px 0.4rem 1.6rem $flat;
		}
		&:after {
			box-shadow: inset 0px 0px 1.6rem $flat;
		}
	}
	&__icon {
		filter: grayscale(40%) brightness(110%);
		@include transition;
	}
	&__label {
		filter: grayscale(40%) brightness(110%);
		display: block;
		margin-top: 0.8rem;
		font-size: 1.4rem;
		font-weight: 700;
		@include transition;
	}
}

@each $key,$val in $states {
	.u-text--#{$key} {
		color: $val;
	}
}

console.clear();

feather.replace();

// random true/false
const randomCheck = () => {
	return (Math.floor(Math.random() * 2) == 0) ? true : false;
}

const buttons = document.querySelectorAll('.c-button');

// active function
const buttonActive = button => {
	let buttonState = button.classList.contains('c-button--active')
	let buttonType = button.dataset.button
	buttonState ?
		button.classList.remove(`u-text--${buttonType}`) :
		button.classList.add(`u-text--${buttonType}`)
	button.classList.toggle('c-button--active')
}

buttons.forEach(button => {
	// click event listener
	button.addEventListener('click', () => {
		buttonActive(button)
	})
	// random active state on load
	let flipActive = randomCheck()
	
	flipActive ? buttonActive(button) : '';
})