[css-forms-1] Add improved slider UA styles styles for switch

Positioning of ::slider-thumb and sizing of ::slider-fill for range still need to be added.

Author: lukewarlow

css-forms-1/Overview.bs

@@ -813,11 +813,31 @@ 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:is([type=checkbox][switch], [type=range]) {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+}
+
+input[type=checkbox][switch] {
+  width: 2em;
+}
+
 ::slider-track {
   height: 1em;
+  width: 100%;
+}
+
+input[type=range]::slider-track {
+  height: 0.5em;
+}
+
+input[type=checkbox][switch]::slider-track {
+  border-radius: 1em;
 }
 
 ::slider-fill {
@@ -829,13 +849,24 @@ 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;
   background-color: currentColor;
   appearance: none;
   width: 1em;
-  height: 100%;
+  height: 1em;
+  border-radius: 100%;
+  position: absolute;
+}
+
+input[type=checkbox][switch]:checked::slider-thumb {
+  inset-inline-end: 0;
 }
 ```