.fizz-toggle {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: $spacing-8;
  position: relative;
}

.fizz-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.fizz-toggle-switch {
  width: $spacing-32;
  height: $spacing-16;
  border-radius: $spacing-8;
  border: $border-width-thin solid transparent;
  background-color: $color-background-subdued;
  transition: all .1s ease-in-out;
  position: relative;
}

.fizz-toggle input:checked + .fizz-toggle-switch {
  background-color: $color-background-brand-secondary;
}

.fizz-toggle input:disabled + .fizz-toggle-switch {
  background-color: $color-background-inactive;
}

.fizz-toggle input:focus-visible + .fizz-toggle-switch {
  outline: none;
  border-color: $color-border-brand-secondary;
  box-shadow: $box-shadow-input-focus;
}

.fizz-toggle-switch:after {
  content: "";
  display: block;
  width: $spacing-12;
  height: $spacing-12;
  border-radius: 50%;
  position: absolute;
  background-color: $color-background-surface;
  top: 1px;
  left: 1px;
  transition: all .1s ease-in-out;
}

.fizz-toggle input:checked + .fizz-toggle-switch:after {
  transform: translateX(calc(#{$spacing-16}));
}

.fizz-toggle input:disabled + .fizz-toggle-switch:after {
  background-color: $color-background-highlight;
}