init project

src/components/forms/ChoiceControls.module.css

@@ -0,0 +1,77 @@
+.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;
+  }
+}