$block = ".switch";

{$block} {
  display: flex;
}

{$block}__input {
  opacity: 0;
  position: absolute;

  &:focus {
    + {$block}__wrapper {
      outline: 1px dotted $brand-base;
    }
  }
}

{$block}__label {
  margin: 0 8px;

}

{$block}__wrapper {
  position: relative;
  width: 34px;
  height: 20px;
  transition-duration: .3s;
  font-size: 30px;
  flex: 0 0 auto;
}

{$block}__wrapper__track {
  position: absolute;
  top: 3px;
  background: $gray-light;
  border-radius: 3em;
  width: 100%;
  height: 14 px;
  transition: background .5s;

  &--on {
    background: $brand-lightest;
  }
}

{$block}__wrapper__knob {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: $gray-base;
  border-radius: 50%;
  box-shadow: 0 0 1px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
  transition: all .3s;

  &--on {
    left: 14px;
    background: $brand-base;
  }
}