Styles reordering for optional custom checkboxes & radios

scss/content/_form-alt-input-types.scss

@@ -3,22 +3,8 @@
  * Alternatives input types (Not Checkboxes & Radios)
  */
 
-// Force height
-[type="color"],
-[type="date"],
-[type="datetime-local"],
-[type="month"],
-[type="time"],
-[type="week"],
-[type="search"] {
-  height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
-}
-
 // Color
 [type="color"] {
-  position: relative;
-  padding: 0;
-  overflow: hidden;
 
   // Wrapper
   &::-webkit-color-swatch-wrapper {
@@ -31,9 +17,11 @@
   // Swatch
   &::-webkit-color-swatch {
     border: none;
+    border-radius: $round/2;
   }
   &::-moz-color-swatch {
     border: none;
+    border-radius: $round/2;
   }
 }
 
@@ -245,14 +233,14 @@
     }
   }
 
-  &:focus  {
+  &:focus {
     box-shadow: none;
   }
 }
 
 // Search
-[type="search"]{
-  padding-left: #{$spacing-input-button-horizontal + 1.5rem};
+input[type="search"] {
+  padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
   border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2};
   // Source: https://feathericons.com/
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");

scss/content/_form-checkbox-radio.scss

@@ -5,12 +5,16 @@
 
 [type="checkbox"],
 [type="radio"] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   display: inline-block;
   width: 1.25rem;
   height: 1.25rem;
   margin-right: .375rem;
   margin-bottom: $spacing-label-input;
   border-width: 2px;
+  vertical-align: middle;
   cursor: pointer;
 
   &::-ms-check {

scss/content/_form.scss

@@ -106,7 +106,7 @@ textarea {
 }
 
 // Remove the border and padding in all browsers (opinionated)
-[type="color"],
+[type="file"],
 [type="range"] {
   padding: 0;
   border-width: 0;
@@ -116,6 +116,11 @@ textarea {
 // Pico
 // ––––––––––––––––––––
 
+// Force height for alternatives input types
+input:not([type="checkbox"]):not([type="radio"]) {
+  height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
+}
+
 // Fieldset
 fieldset {
   margin: 0;
@@ -144,20 +149,35 @@ fieldset legend {
   vertical-align: middle;
 }
 
-// Inputs (Commons styles)
-input,
+// Inputs (Not Checkboxes, Radios, Range, File)
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
 select,
 textarea {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
+  vertical-align: middle;
+}
+
+// Inputs (Not Checkboxes, Radios)
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  margin-bottom: $spacing-typography;
+}
+
+// Inputs (Commons styles)
+input,
+select,
+textarea {
   border: 1px solid var(--input-border);
   border-radius: $round;
   outline: none;
   background-color: var(--input-background);
   color: var(--text);
   font-weight: normal;
-  vertical-align: middle;
+
 
   @if $enable-transitions {
     transition:
@@ -202,12 +222,10 @@ textarea {
   }
 }
 
-// Text, Select & Textarea
+// Validation states for Text, Select & Textarea
 input,
 select,
 textarea {
-  margin-bottom: $spacing-typography;
-  padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
 
   @if $enable-input-states and $enable-classes {
 
@@ -221,13 +239,11 @@ textarea {
     }
 
     &.valid {
-      // border-bottom: 1px solid var(--valid);
       // Source: https://feathericons.com/
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
     }
 
     &.invalid {
-      // border-bottom: 1px solid var(--invalid);
       // Source: https://feathericons.com/
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
     }

scss/pico.slim.scss

@@ -43,7 +43,7 @@ $enable-transitions: false;
 @import "content/button";                  // button, a[role=button], type=button, type=submit, ...
 // @import "content/button-styles";        // .secondary, .contrast, .outline
 @import "content/form";                    // input, select, textarea, label, fieldset, legend
-@import "content/form-checkbox-radio";     // type=checkbox, type=radio, role=switch
+// @import "content/form-checkbox-radio";  // type=checkbox, type=radio, role=switch
 // @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
 @import "content/table";                   // table, tr, td, ...
 // @import "content/code";                 // pre, code, ...