.container
  .checkbox
    input(type="checkbox" name="example" id="example" value="Bike")
    .checkbox-inner
      label(for="example")
      span
    .checkbox__on ON
    .checkbox__off OFF
    
.inspired-by
  a(href="https://dribbble.com/shots/6388490-Switch-Button", target="_blank") Inspired by Semih Yilmaz

// font import
@import url('https://fonts.googleapis.com/css?family=Montaga|Noto+Sans&display=swap');

// base
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-size: 16px;
  background-color: #eceadd;
  font-family: 'Noto Sans', sans-serif;
}

h1, h2, h3 {
  font-family: 'Montaga', serif;
}

// grid
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

// checkbox
.checkbox {
  position: relative;
  width: 80px;
  height: 36px;
  background-color: transparent;
}

.checkbox input, .checkbox-inner:before, .checkbox-inner span, .checkbox-inner label {
  position: absolute;
  top: 0;
  left: 0;
}

.checkbox input {
  opacity: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.checkbox-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 2px solid #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  transform: rotate(-12deg);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.15);
  transition-property: transform;
  transition-timing-function: linear;
  transition-delay: 0;
  transition-duration: .32s;
}

.checkbox-inner:before {
  content: "";
  width: 100%;
  height: 100%;
  z-index: 2;
  box-shadow: inset 0 10px 16px 0 rgba(0,0,0,0.28);
}

.checkbox-inner span {
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #9CC838;
  transform-origin: right;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.2, .585, 2, .875);
  transition-delay: .32s;
  transition-duration: 1.6s;
}

.checkbox-inner label {
  position: absolute;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-image: radial-gradient(50% 88%, #FFFFFF 3%, #F5F5F5 97%);
  transition-property: left;
  transition-timing-function: cubic-bezier(1, .885, 2, .875);
  transition-delay: .32s;
  transition-duration: 1.32s;
}

.checkbox__on, .checkbox__off {
  position: absolute;
  top: 0;
  height: 100%;
  transition: opacity .32s linear 0s;
}

.checkbox__on {
  right: 100%;
  margin-right: 16px;
  opaciy: 1;
}

.checkbox__off {
  left: 100%;
  margin-left: 16px;
  opacity: .24;
}

.checkbox input:checked + .checkbox-inner {
  transform: rotate(12deg);
}

.checkbox input:checked + .checkbox-inner label {
  left: calc(100% - 32px);
}

.checkbox input:checked + .checkbox-inner span {
  transform: scaleX(0);
}

.checkbox input:checked ~ .checkbox__on {
  opacity: .24;
}

.checkbox input:checked ~ .checkbox__off {
  opacity: 1;
}


// inspired by
.inspired-by {
  position: fixed;
  bottom: 2em;
  left: 2em;
  z-index: 3;
  
  a {
    text-decoration: none;
    color: var(--bg-color);
    font-size: .875em;
    letter-spacing: 1px;
  }
}