$green: #56c080;

.toggle {
  cursor: pointer;
  display: inline-block;
}

.toggle-switch {
  display: inline-block;
  background: #ccc;
  border-radius: 16px;
  width: 58px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;

  &:before,
  &:after {
    content: "";
  }

  &:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
  }

  .toggle:hover &:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  }

  &.disabled:before {
    background: linear-gradient(to bottom, #ccc 0%, #bbb 100%);
  }

  .toggle:hover &.disabled:before {
    background: linear-gradient(to bottom, #ccc 0%, #bbb 100%);
  }

  .toggle-checkbox:checked+& {
    background: $green;

    &:before {
      left: 30px;
    }
  }
  .toggle-checkbox:not(checked)+& {
    background: $grey-lighter;

    &:before {
      left: 4px;
    }
  }
  .toggle-checkbox:indeterminate+& {
    background: rgba(0, 0, 0, 0.301);

    &:before {
      left: 16px;
      background: rgba(0, 0, 0, 0.301);
    }
  }

}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}

.toggle-label {
  margin-left: 5px;
  position: relative;
  top: 2px;
}