sidebar part 4: spell slot block

style/_sidebar.scss

@@ -252,6 +252,51 @@ aside {
         }
     }
 
+    .slots {
+        margin: 0 7px;
+
+        .slot-level {
+            display: flex;
+            justify-content: flex-start;
+
+            @for $i from 1 through 9 {
+                &-#{$i} .spell-slot {
+                    background: hsl((348 + ($i * 3)) * 1deg, 83%, 47%);
+                }
+            }
+        }
+
+        .slot-level-title {
+            font-family: vars.$t;
+            font-weight: 100;
+            color: #aaa;
+            text-align: right;
+            display: block;
+            width: 32px;
+            &::after {
+                content: " |";
+            }
+        }
+
+        .spell-slot {
+            $size: 20px;
+            width: $size;
+            height: $size;
+            margin: 2px;
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        .spell-slot:has(~ .spell-slot:hover), .spell-slot:hover, .spell-slot.used {
+            filter: contrast(20%);
+        }
+
+        .spell-slot.used:hover, .spell-slot.used:hover ~ .spell-slot.used {
+            filter: contrast(70%);
+        }
+    }
+
     input {
         max-width: 100%;
         width: fit-content;