WIP

src/style/atoms/_toggle.scss

@@ -0,0 +1,90 @@
+// Toggle Button
+.toggle {
+    position: relative;
+    margin-top: 58px;
+    background-color: rgba($color-secondary, 0.25);
+    display: inline-flex;
+    border-radius: 50vh;
+
+    button, .pill {
+        position: relative;
+        z-index: 2;
+        color: $color-secondary;
+        border-radius: 50vh;
+        padding: 12px 24px;
+        font-family: $font-sans-sb;
+        font-size: rem(18px);
+        line-height: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        outline: none;
+        transition: color 150ms $ease-inout;
+    }
+    button {
+        span {
+            margin-left: 16px;
+        }
+        svg {
+            fill: $color-secondary;
+            * {
+                transition: fill 150ms $ease-inout;
+                transition-delay: 0ms;
+            }
+        }
+
+        // Active button
+        &.active {
+            color: #fff;
+
+            svg * {
+                fill: #C78FEC;
+            }
+        }
+
+        // Hover
+        &:hover:not(.active) {
+            color: $color-secondary-bright;
+
+            svg {
+                fill: $color-secondary-bright;
+            }
+        }
+        // List icon
+        &[data-layout="list"]:hover {
+            rect:nth-of-type(even) {
+                animation: layoutListEven 400ms $ease-cubic infinite alternate forwards;
+            }
+            rect:nth-of-type(odd) {
+                animation: layoutListOdd 400ms $ease-cubic infinite alternate forwards;
+            }
+        }
+        // Grid icon
+        &[data-layout="grid"]:hover {
+            rect:nth-of-type(even) {
+                animation: layoutGridEven 400ms $ease-cubic infinite alternate forwards;
+            }
+            rect:nth-of-type(odd) {
+                animation: layoutGridOdd 400ms $ease-cubic infinite alternate forwards;
+            }
+        }
+    }
+
+    // Pill (active)
+    .pill {
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: auto;
+        height: 100%;
+        background-color: $color-primary;
+        transition: all 500ms $ease-quart;
+
+        span {
+            content: attr(data-text);
+            display: block;
+            margin: 0;
+        }
+    }
+}