💄 Add toggle design (from the activeadmin_addons)

app/assets/stylesheets/arctic_admin/components/_toggle.scss

@@ -0,0 +1,74 @@
+$toggle-width: 40px !default;
+$toggle-height: 20px !default;
+$toggle-offset: 3px !default;
+
+$toggle-outer-default: #ddd !default;
+$toggle-outer-active: $primary-color !default;
+$toggle-inner-default: #fff !default;
+$toggle-inner-active: #fff !default;
+
+$toggle-transition: 200ms ease-out !default;
+
+.toggle-bool-switches-container {
+
+  text-align: left;
+
+  .toggle-bool-switch {
+    // reset style
+    background-image: none;
+    box-shadow: none;
+    //
+
+    cursor: pointer;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: var(--toggle-width);
+    height: var(--toggle-height);
+    background-color: var(--toggle-outer-default);
+    border-radius: 100vw;
+    cursor: pointer;
+    transition: var(--toggle-transition);
+
+    &::before {
+      // reset style
+      height: auto;
+      width: auto;
+      background-image: none;
+      //
+
+
+      content: "";
+      position: absolute;
+      top: var(--toggle-offset);
+      left: var(--toggle-offset);
+      bottom: var(--toggle-offset);
+
+      aspect-ratio: 1 / 1;
+
+      background-color: var(--toggle-inner-default);
+      border-radius: 50%;
+      box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
+      transition: var(--toggle-transition);
+    }
+
+    &.on {
+      // reset style
+      background-image: none;
+      //
+      background: $primary-color;
+
+      &::before {
+        // reset style
+        left: var(--toggle-offset);
+        //
+
+        background-color: var(--toggle-inner-active);
+        transform: translateX(
+          calc(var(--toggle-width) - var(--toggle-height))
+        );
+      }
+    }
+  }
+}