=on-off-checkbox($border-width: 1px, $height: 1.5rem, $width: 4.5rem, $font-size: .8125rem)
  span
    +size($width calc(#{$height} + #{$border-width} * 2))
    border: solid $border-width var(--input-border)
    border-radius: $height
    font-size: $font-size
    &::before
      +size($height)
    &::after
      +size(100% calc(100% - #{$border-width} * 2))
      padding-left: $height
      padding-right: .75em
  input:checked + span
    &::after
      padding-left: 1em
      padding-right: $height

.a-on-off-checkbox
  +position(relative)
  display: block
  cursor: pointer
  padding-block: .5rem
  margin-block: -.5rem
  input
    opacity: 0
    +position(absolute, left -1rem, top 0)
    +size(0)
    display: block
    overflow: hidden
  span
    display: block
    background-color: var(--background)
    +position(relative)
    transition: all .2s ease-out
    &::before
      content: ""
      display: block
      border-radius: 50%
      background-color: var(--base)
      +position(absolute, left 0, top 0)
      border: solid 1px var(--input-border)
    &::after
      content: "OFF"
      +text-block(1em 1, flex center 600)
      align-items: center
      justify-content: center
  input:checked + span
    background-color: var(--danger)
    border-color: var(--danger)
    &::before
      +position(absolute, left auto, right 0)
    &::after
      content: "ON"
      color: var(--reversal-text)
  &.is-md
    +on-off-checkbox
  &.is-sm
    +on-off-checkbox($border-width: 1px, $height: 1.125rem, $width: 3.5rem, $font-size: .75rem)
