@if $css-variable-enabled {
  $switch-border-radius: var(--switch-border-radius);
  $switch-border-width: var(--switch-border-width);
  $switch-label-margin: var(--switch-label-margin);
  $switch-margin: var(--switch-margin);
  $switch-padding: var(--switch-padding);
  $primary-transition: var(--primary-transition);
}

.#{$prefix}switch {
  position: relative;
  display: inline-block;
  user-select: none;
  margin: $switch-margin;

  span {
    vertical-align: middle;

    ~ span {
      margin-left: $switch-label-margin;
    }
  }

  > input {
    display: inline-block;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    opacity: 0;

    + span {
      padding-left: 35px;
      background-color: var(--switch-bg-color);
      border-style: solid;
      border-color: var(--switch-border-color);
      height: 18px;
      position: relative;
      border-radius: $switch-border-radius;
      border-width: $switch-border-width;
      transition: $primary-transition;

      &:after {
        content: '';
        border-radius: 100px;
        width: 6px;
        height: 12px;
        background-color: var(--switch-fg-color);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 7px;
        transition: $primary-transition;
      }
    }

    &:checked + span {
      background-color: var(--switch-active-bg-color);
      border-color: var(--switch-active-border-color);

      &:after {
        background-color: var(--switch-active-fg-color);
        left: 22px;
      }
    }

    &:focus + span,
    &.#{$prefix}focused + span {
      box-shadow: 0 0 0 2px var(--switch-border-spread-color);
      border-color: var(--switch-active-border-color);
    }
  }

  @each $name, $color, $s, $g, $light-color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name} > input:checked + span {
        background-color: $color;
        border-color: $color;
      }

      &.#{$prefix}#{$name} > input:focus + span,
      &.#{$prefix}#{$name} > input.#{$prefix}focused + span {
        box-shadow: 0 0 0px 2px $light-color;
        border-color: $color;
      }
    }
  }

  &[disabled] {
    pointer-events: none;

    span {
      color: var(--item-disabled-fg-color);
    }

    > input + span {
      background-color: var(--item-disabled-bg-color);
      border-color: var(--item-disabled-bg-color);
      box-shadow: 0 0 0 0 $transparent;

      &:after {
        background-color: var(--item-disabled-fg-color);
      }
    }

    > input:checked + span {
      background-color: var(--item-disabled-bg-color);
      border-color: var(--item-disabled-bg-color);

      &:after {
        background-color: var(--item-disabled-fg-color);
      }
    }
  }

  &.#{$prefix}gummy:active > input + span:after {
    width: 20px;
  }

  &.#{$prefix}gummy:active > input:checked + span:after {
    width: 20px;
    transform: translate(-12px, -50%);
  }
}