[css-forms-1] Add initial UA styles for switch

Author: lukewarlow

css-forms-1/Overview.bs

@@ -813,13 +813,25 @@ select {
 
 ## Sliders ## {#stylesheet-sliders}
 
-ISSUE: Refine meter, progress, switch and range input styling.
+ISSUE(12267): Refine meter, progress, switch and range input styling.
 
 ```css
+input[type=checkbox][switch] {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  width: 2em;
+}
+
 ::slider-track {
   height: 1em;
 }
 
+input[type=checkbox][switch]::slider-track {
+  width: 100%;
+  border-radius: 1em;
+}
+
 ::slider-fill {
   height: 100%;
   background-color: currentColor;
@@ -829,6 +841,11 @@ ISSUE: Refine meter, progress, switch and range input styling.
   inline-size: 0;
 }
 
+input[type=checkbox][switch]::slider-fill {
+  background-color: transparent;
+  border-radius: inherit;
+}
+
 ::slider-thumb {
   border-radius: 0;
   border: none;
@@ -837,6 +854,16 @@ ISSUE: Refine meter, progress, switch and range input styling.
   width: 1em;
   height: 100%;
 }
+
+input[type=checkbox][switch]::slider-thumb {
+  border-radius: 100%;
+  height: 1em;
+  position: absolute;
+}
+
+input[type=checkbox][switch]:checked::slider-thumb {
+  inset-inline-end: 0;
+}
 ```
 
 ## Checkboxes & radios ## {#stylesheet-checkbox-radio}