.choice {
  display: flex;
  min-block-size: 2.75rem;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}
.choice > input:not(.switchInput) {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.2rem;
  accent-color: var(--interactive-primary);
}
.content {
  display: grid;
  gap: var(--space-1);
}
.label {
  font-weight: 700;
}
.description {
  color: var(--text-secondary);
  font-size: var(--type-label-size);
}
.invalid .label {
  color: var(--status-error-text);
}
.switchInput {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}
.switchTrack {
  position: relative;
  flex: none;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  margin-block-start: 0.1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  transition: background var(--duration-fast) var(--easing-productive);
}
.switchTrack span {
  position: absolute;
  inset-block-start: 0.18rem;
  inset-inline-start: 0.2rem;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-subtle);
  transition: transform var(--duration-fast) var(--easing-productive);
}
.switchInput:checked + .switchTrack {
  background: var(--interactive-primary);
}
.switchInput:checked + .switchTrack span {
  transform: translateX(1.2rem);
}
html[dir='rtl'] .switchInput:checked + .switchTrack span {
  transform: translateX(-1.2rem);
}
.switchInput:focus-visible + .switchTrack {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.switchInput:disabled + .switchTrack {
  opacity: var(--opacity-disabled);
}
@media (prefers-reduced-motion: reduce) {
  .switchTrack,
  .switchTrack span {
    transition: none;
  }
}