Implement the toggle for capacity usage. (closes #156)

styles/v3/elements/checkbox.scss

@@ -0,0 +1,24 @@
+.dotdungeon.style-v3 {
+	input[type="checkbox"] {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		border-radius: 2px;
+		margin: 0;
+		cursor: pointer;
+
+		background: var(--elevation-8dp-bg);
+		position: relative;
+		&:checked::before {
+			content: "";
+			background: var(--checkbox-checked);
+			border-radius: 3px;
+			$margin: 4px;
+			top: $margin;
+			bottom: $margin;
+			left: $margin;
+			right: $margin;
+			position: absolute;
+		}
+	}
+}

styles/v3/index.scss

@@ -5,6 +5,7 @@
 /* Element-Styling */
 @use "./elements/utilities.scss";
 @use "./elements/button.scss";
+@use "./elements/checkbox.scss";
 @use "./elements/select.scss";
 @use "./elements/text-input.scss";
 @use "./elements/number-input.scss";

styles/v3/layouts/items/untyped/v2.scss

@@ -60,6 +60,11 @@
 		@extend %flex-col;
 
 		.capacity {
+			&--usage, &--quantity {
+				display: flex;
+				align-items: center;
+			}
+
 			&--calculated {
 				display: flex;
 				flex-direction: row;

styles/v3/themes/dark.css

@@ -4,4 +4,6 @@
 
 	--surface: #121212;
 	--on-surface: white;
+
+	--checkbox-checked: #00d300;
 }