- 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) : '';
})