/* COPIED FROM BULMA/SWITCH */
.toggle[type='checkbox'] {
  outline: 0;
  user-select: none;
  position: absolute;
  margin-bottom: 0;
  opacity: 0;
  left: 0;
}
.toggle[type='checkbox'][disabled] {
  cursor: not-allowed;
}
.toggle[type='checkbox'][disabled] + label {
  opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label::before {
  opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label::after {
  opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label:hover {
  cursor: not-allowed;
}
.toggle[type='checkbox'] + label {
  position: relative;
  display: inline-block;
  padding-left: 3.5rem;
  cursor: pointer;
}
.toggle[type='checkbox'] + label::before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 3rem;
  height: 1.5rem;
  border: 0.1rem solid transparent;
  border-radius: 0.75rem;
  background: $ui-gray-300;
  content: '';
}
.toggle[type='checkbox'] + label::after {
  display: block;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1rem;
  height: 1rem;
  transform: translate3d(0, 0, 0);
  border-radius: 50%;
  background: white;
  transition: all 0.25s ease-out;
  content: '';
}
.toggle[type='checkbox']:checked + label::before {
  background: $ui-gray-700;
}
.toggle[type='checkbox']:checked + label::after {
  left: 1.625rem;
}

/* CUSTOM */
.toggle[type='checkbox'] {
  &.is-small {
    + label {
      font-size: $size-7;
      padding-left: $size-8 * 2.5;
      margin: 0 0.25rem;
      &::before {
        top: $size-8 / 5;
        height: $size-8;
        width: $size-8 * 2;
      }
      &::after {
        width: $size-8 * 0.8;
        height: $size-8 * 0.8;
        transform: translateX(0.15rem);
        left: 0;
        top: $size-8/ 4;
      }
    }
    &:checked + label::after {
      left: 0;
      transform: translateX(($size-8 * 2) - ($size-8 * 0.94));
    }
  }

  &.is-large {
    width: 4.5rem;
    height: 2.25rem;
  }
}
.toggle[type='checkbox'].is-small + label::after {
  will-change: left;
}
.toggle[type='checkbox']:focus + label {
  box-shadow: 0 0 1px $blue;
}
.toggle[type='checkbox'].is-success:checked + label::before {
  background: $blue;
}

.toggle-label {
  width: 100%;
}