Working on the spells panel, which resulted in a lot of weird structural changes that aren't *really* functional yet

styles/_vars.scss

@@ -24,4 +24,10 @@ $text-on-primary-l20: black;
 $text-on-primary-d20: white;
 $text-on-primary-d40: white;
 $text-on-primary-d60: white;
-$text-on-primary-d80: white;
+$text-on-primary-d80: white;
+
+$colour-danger: red;
+$colour-danger-d20: color.scale($colour-danger, $lightness: -20%);
+
+$text-on-danger: white;
+$text-on-danger-d20: white;

styles/generic.scss

@@ -61,6 +61,7 @@
 		.debug-data {
 			opacity: 60%;
 			font-family: $body-font;
+			word-break: break-all;
 		}
 
 		button {
@@ -69,12 +70,35 @@
 			&.primary {
 				background: $colour-primary;
 				color: $text-on-primary;
-				padding: 5px 7px;
+				padding: 4px 8px;
 				&:hover {
 					background: $colour-primary-d20;
 					color: $text-on-primary-d20;
 				}
 			}
+
+			&.danger {
+				background: $colour-danger;
+				color: $text-on-danger;
+				padding: 4px 8px;
+				&:hover {
+					background: $colour-danger-d20;
+					color: $text-on-danger-d20;
+				}
+			}
+
+			&.reduced-padding {
+				padding: 2px 4px;
+			}
+
+
+			&.equal-padding {
+				padding: 4px 4px;
+				&.reduced-padding {
+					padding: 2px 2px;
+				}
+			}
+
 		}
 	}
 }

styles/icons.scss

@@ -0,0 +1,14 @@
+$iconSizes: 12, 16, 20, 24, 28, 32, 36;
+
+.dotdungeon.dotdungeon.dotdungeon.dotdungeon {
+	.icon {
+
+		// The various icon sizes
+		@each $size in $iconSizes {
+			&--#{$size} {
+				height: #{$size}px;
+				width: #{$size}px;
+			};
+		}
+	}
+}

styles/root.scss

@@ -3,6 +3,7 @@
 @use "./vars.scss" as *;
 
 @use "./generic.scss";
+@use "./icons.scss";
 
 @use "./sheets/partials/stat.scss";
 @use "./sheets/partials/skill.scss";
@@ -10,4 +11,5 @@
 
 @use "./sheets/actor/mvp.scss";
 @use "./sheets/actor/sync/basic.scss";
-@use "./sheets/items/aspect.scss";
+@use "./sheets/items/aspect.scss";
+@use "./sheets/items/spell.scss";

styles/sheets/actor/mvp.scss

@@ -21,6 +21,23 @@
 	padding: 4px;
 	gap: 4px;
 
+	details {
+		border-radius: 4px;
+		background-color: rgba(0,0,0, 0.2);
+		padding: 4px;
+		margin-bottom: 8px;
+
+		summary {
+			cursor: pointer;
+		}
+
+		&[open] {
+			.expanded-rotate {
+				transform: rotate(90deg);
+			}
+		}
+	}
+
 	.panel {
 		&--profile {
 			grid-area: profile;

styles/sheets/items/spell.scss

@@ -0,0 +1,16 @@
+@use "../../vars" as *;
+
+.dotdungeon .item--spell {
+	padding: 4px;
+
+	input[type=text] {
+		font-size: 1.5em;
+		height: 1.5em;
+		width: 100%;
+	}
+
+	textarea {
+		width: 100%;
+		resize: vertical;
+	}
+}