.container
  input#toggle(type='checkbox')
  label(for='toggle')
    #switch
  span.blue.upperg G
  span.blue.g g
  span.green.l l
  span.red.e e

// Variables

$blue: #4285F4;
$yellow: #fBBC05;
$green: #34A853;
$red: #EA4335;
$red-darker: #DE2817;
$yellow-darker: #DDA703;
$font: 'product sans', sans-serif;

// Toggle Button

#toggle {
  display: none; // Fix this since screenreaders can't see
}

label {
  display: inline-block;
  background: $red-darker;
  width: 1em;
  height: 0.5em;
  border-radius: 0.4em;
  margin-left: 0.05em;
  position: relative;
  cursor: pointer;
}

#switch {
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.5em;
  background: $red;
  box-shadow: 5px 0px 28px -9px rgba(0,0,0,0.75);
  transition: transform 0.2s ease-in;
}

// Layout

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

// letter spacing 

span {
  font-weight: 600;
  color: $red;
}

.upperg {
  font-size: 1.1em;
  float: left;
}

.g {
  margin-left: 0.1em;
}

.e {
  transform: rotate(345deg);
  display: inline-block;
}

// Backbone

body {
  font-family: $font;
  font-size: 13vw;
}

// Checked

#toggle:checked ~ label #switch {
  transform: translatex(0.5em);
  background: $yellow;
  box-shadow: -5px 0px 28px -9px rgba(0,0,0,0.75);
  transition: transform 0.2s ease-in;
}

#toggle:checked ~ label {
  background: $yellow;
}

#toggle:checked ~ .blue {
  color: $blue;
}

#toggle:checked ~ .green {
  color: $green;
}

#toggle:checked ~ .red {
  color: $red;
}

span {
  transition: color 0.2s ease-in;
}

// Thanks Özgü https://dribbble.com/shots/2544386-Google