Initial commit

styles/components.less

@@ -0,0 +1,45 @@
+.slider-container {
+    position: relative;
+    background: lightslategray;
+
+    .slider-inner-container {
+        position: absolute;
+        top: 1px;
+        left: -60px;
+        background-color: inherit;
+        color: inherit;
+        border-radius: 30px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        height: 20px;
+        width: 40px;
+        padding: 0 4px;
+        border: @thinBorder solid black;
+    
+        &:hover {
+            filter: drop-shadow(0 0 3px red);
+        }
+    
+        input:checked {
+            opacity: 0;
+            width: 0;
+            height: 0;
+
+            & + .slider-icon {
+                transform: translateX(17px);
+                transition: 1s;
+            }
+        }
+
+        .slider-icon {
+            position: absolute;
+            left: 4px;
+            height: 15px;
+            width: 15px;
+            border-radius: 50%;
+            transition: 1s;
+            transform: translateX(0);
+        }
+    }
+}