Changed --sf-txt-small to --sf-fz-small

Added :where `validates`

Author: Sarmaged

src/switch.css

@@ -76,7 +76,7 @@ label.sf-switch input[type='checkbox'] ~ *
 .sf-switch.multiple .sf-switch-toggle span {
   display: block;
 
-  font-size: var(--sf-txt-small);
+  font-size: var(--sf-fz-small);
   text-align: center;
 
   min-width: 2rem;
@@ -112,6 +112,6 @@ label.sf-switch input[type='checkbox'] ~ *
 .sf-switch.multiple.vert .sf-switch-toggle { flex-flow: column }
 
 .sf-switch.multiple .sf-switch-description {
-  font-size: var(--sf-txt-small);
+  font-size: var(--sf-fz-small);
   margin: 0;
 }

src/validate.css

@@ -1,11 +1,8 @@
-.sf-description,
-.sf-invalid,
-.sf-valid
-{
+:where(.sf-description, .sf-invalid, .sf-valid) {
   display: none;
   color: hsl(var(--sf-form-c-txt) / 40%);
 
-  font-size: var(--sf-txt-small);
+  font-size: var(--sf-fz-small);
   font-family: inherit;
   font-weight: 400;
   line-height: 1;
@@ -15,12 +12,7 @@
   margin: 0 0 var(--sf-gap);
 }
 
-.validates + .sf-description,
-.validates + .sf-invalid,
-.validates + .sf-valid
-{
-  margin: 0 0 var(--sf-gap);
-}
+.validates + :where(.sf-description, .sf-invalid, .sf-valid) { margin: 0 0 var(--sf-gap) }
 
 .sf-description { display: block }
 

src/var.css

@@ -2,7 +2,8 @@
   --sf-gap: 0.5em;
 
   --sf-disabled: 0.4;
-  --sf-txt-small: 0.75rem;
+
+  --sf-fz-small: 0.75rem;
 
   --sf-form-radius: 0.5em;