.switch
  display: inline-flex
  align-items: center
  cursor: pointer

  &__control
    display: inline-flex
    align-items: center
    height: 24px
    width: 44px
    border: 1px solid rgba(195, 195, 195, 0.9)
    border-radius: 12px
    padding: 0 2px
    background-color: rgba(202, 202, 202, 0.9)
    transition: 250ms background-color

  &__input:focus-visible + &__control
    outline: 2px solid hsl(200 98% 39%)
    outline-offset: 2px

  &__control[data-checked]
    border-color: rgb(75, 117, 158)
    background-color: rgb(72, 111, 149)

  &__thumb
    height: 20px
    width: 20px
    border-radius: 10px
    background-color: white
    transition: 250ms transform

  &__thumb[data-checked]
    transform: translateX(calc(100% - 1px))

  &__label
    margin-right: 1rem
    color: white
    font-size: 1rem
    user-select: none