Scss files organization

+ Slim version example

scss/content/_form-checkbox-radio.scss

@@ -0,0 +1,91 @@
+/**
+ * Form elements
+ */
+
+// Checkboxes & Radios
+[type="checkbox"],
+[type="radio"] {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  margin-right: .375rem;
+  margin-bottom: $spacing-label-input;
+  vertical-align: middle;
+  cursor: pointer;
+
+  &::-ms-check {
+    display: none; // unstyle IE checkboxes
+  }
+
+  &:checked {
+    border-color: var(--primary);
+    background-color: var(--primary);
+    // 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: .66rem auto;
+  }
+
+  & ~ label {
+    display: inline-block;
+    margin-right: .375rem;
+    margin-bottom: 0;
+    cursor: pointer;
+  }
+}
+
+// Radios
+[type="radio"] {
+  border-radius: 50%;
+
+  &:checked {
+    border-width: .33rem;
+    border-color: var(--primary);
+    background-color: var(--primary-inverse);
+    background-image: none;
+  }
+}
+
+// Switchs
+[type="checkbox"][role="switch"] {
+
+  // Config
+  $switch-height:      1rem;
+  $switch-width:       1.85rem;
+  $switch-border:      2px;
+  $switch-transition:  .1s ease-in-out;
+
+  // Styles
+  width: $switch-width;
+  height: $switch-height;
+  border: $switch-border solid var(--input-border);
+  border-radius: $switch-height;
+  background-color: var(--input-border);
+  line-height: $switch-height;
+
+  &:before {
+    display: block;
+    width: calc(#{$switch-height} - #{$switch-border*2});
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--primary-inverse);
+    content: '';
+    transition: margin $switch-transition;
+  }
+
+  &:checked {
+    border-color: var(--primary);
+    background-color: var(--primary);
+    // Disable if check box icon is needed
+    background-image: none;
+    // Enable if check box icon is needed
+    // background-position: center left $switch-width/6;
+    // background-size: $switch-width/5 auto;
+
+    &::before {
+      margin-right: 0;
+      margin-left: calc(#{$switch-width/2} - #{$switch-border});
+    }
+  }
+}