.toggle {
  display: inline-block;
  box-sizing: border-box;
  * { box-sizing: border-box; }
  cursor: pointer;

  &__label {
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
  }

  &:hover .toggle__label {
    opacity: 1;
  }

  &__label {
    color: #fff;
    margin: 5px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.8);
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 1px;
    height: 32px;
    position: absolute;
    top: 35px;
    //left: 60px;
  }

  &__hitbox {
    display: inline-block;
    border-radius: 20px;
    z-index: 100;
    pointer-events: auto;
    width: 44px;
    height: 24px;
    padding: 2px;
    background: #FFF;
    border: 1px solid #DDD;
    transition: background .2s;

    &:focus {
      outline: none;
      background: #EEE;
      border: 1px solid darken(#AAA, 10%);
    }

    &--active:focus {
      background: mix(#4285F4, #FFF, 10%);
      border: 1px solid darken(#4285F4, 10%);
    }
  }

  &__ball {
    width: 18px;
    border-radius: 18px;
    border: 1px solid #888;
    transition: all .2s;
    height: 18px;
    display: block;
    margin-left: 20px;
    background: #AAA;

    &--active {
      margin-left: 0;
      background: #4285F4;
      border: 1px solid darken(#4285F4, 10%);
    }
  }

}