Initialization

components/_healthBox.css

@@ -0,0 +1,62 @@
+.healthWrapper {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  > {
+    .healthContainer {
+      display: grid;
+      grid-template-columns: repeat(3, auto);
+      justify-items: center;
+      gap: 0px;
+      justify-content: start;
+      > {
+        * {
+          margin: -1px;
+        }
+        /* TODO: Refactor to use Labels !!!! */
+        label  {
+          &.healthTrackerBox {
+            cursor: pointer;
+            order: 1;
+            background-color: red;
+            z-index: 1;
+            position: relative;
+            border: 2px solid #550000;
+            border-radius: 0px;
+            appearance: none;
+            width: 6rem;
+            height: 6rem;
+            border-radius: 3px;
+
+            &.reset {
+              order: 2;
+              background-color: brown;
+            }
+  
+            &:after {
+              position: absolute;
+              content: "-1";
+              top: 2px;
+              right: 4px;
+            }
+  
+            &:checked {
+              position: absolute;
+              opacity: 0;
+              z-index: 0;
+            }
+  
+            &:checked ~ .healthTrackerBox {
+              order: 3;
+              background-color: #444444;
+            }
+  
+            &:focus {
+              outline: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}