@include b(switch) {
  @include define(width, 52px);
  @include define(height, 32px);
  @include define(background, rgba(120, 120, 128, 0.16));
  @include define(border-radius, var(--za-radius-round));
  @include define(transition, all 0.3s);
  @include define(checked-background, var(--za-theme-primary));
  @include define(knob-background, #fff);
  @include define(knob-size, 28px);
  @include define(knob-box-shadow, '0 3px 1px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.15)');
  @include define(knob-border-color, rgba(0, 0, 0, 0.04));
  @include define(knob-border-width, 0.5px);
  @include define(
    knob-transition,
    'transform 0.3s cubic-bezier(0.45, 1, 0.4, 1), transform 0.3s cubic-bezier(0.4, 0.4, 0.25, 1.35)'
  );

  @include e(input) {
    position: relative;
    width: var(--width);
    height: var(--height);
    border: calc((var(--height) - var(--knob-size)) / 2) solid transparent;
    border-radius: var(--border-radius);
    background: var(--background);
    vertical-align: middle;
    transition: var(--transition);
    outline: 0;
    -webkit-appearance: none;

    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: var(--knob-size);
      border-radius: var(--border-radius);
    }

    &:before {
      width: calc(var(--width) - var(--height) + var(--knob-size));
      transition: var(--knob-transition);
    }

    &:after {
      width: var(--knob-size);
      background: var(--knob-background);
      border: var(--knob-border-width) solid var(--knob-border-color);
      box-shadow: var(--knob-box-shadow);
      transition: var(--knob-transition);
    }

    &:checked {
      background: var(--checked-background);

      &:after {
        transform: translateX(calc(var(--width) - var(--height)));
      }
    }
  }

  @include m(disabled) {
    @include e(input) {
      cursor: not-allowed;
      opacity: var(--za-opacity-disabled);
    }
  }
}