:root {
  --toggle-padding: 0.18rem;
  --toggle-height: calc(2rem - var(--toggle-padding));
  --toggle-inner-height: calc(var(--toggle-height) - 4 * var(--toggle-padding));
  --toggle-width: calc(2 * var(--toggle-height));
}

.feature-toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: var(--spacer-half);
  justify-content: flex-end;
  position: relative;
}

.feature-toggle__input {
  height: 0;
  opacity: 0;
  width: 0;
}

.feature-toggle__slider {
  background-color: var(--color-neutral);
  border: 3px solid var(--color-neutral);
  border-radius: var(--toggle-height);
  box-sizing: border-box;
  cursor: pointer;
  height: calc(var(--toggle-height));
  position: relative;
  transition-duration: var(--transition-duration);
  transition-property: border-color, background-color;
  width: calc(2 * var(--toggle-height));
}

.feature-toggle__slider::before {
  background-color: var(--color-light);
  border-radius: 50%;
  bottom: var(--toggle-padding);
  content: "";
  height: var(--toggle-inner-height);
  left: var(--toggle-padding);
  position: absolute;
  transition: var(--transition-duration);
  width: var(--toggle-inner-height);
}

.feature-toggle__input:checked + .feature-toggle__slider {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.feature-toggle__input:disabled + .feature-toggle__slider {
  background-color: rgb(224 224 224 / 50%);
  cursor: not-allowed;
  opacity: 0.7;
}

.feature-toggle__input:focus + .feature-toggle__slider {
  border-color: var(--color-accent);
}

.feature-toggle__input:checked:focus + .feature-toggle__slider {
  border-color: var(--color-accent-active);
}

.feature-toggle__input:checked + .feature-toggle__slider::before {
  transform: translateX(calc(var(--toggle-width) - 4 * var(--toggle-padding) - 100%));
}
