Add edit/view state to the costs of the modal (closes #151)

styles/v3/elements/headers.scss

@@ -4,7 +4,7 @@
 		font-size: 1rem;
 		margin: 0;
 	}
-	h1 {
+	h1, .h1 {
 		font-size: 1.5rem;
 	}
 }

styles/v3/elements/label.scss

@@ -0,0 +1,5 @@
+@use "../mixins/material";
+
+.dotdungeon.style-v3 > .window-content label {
+	cursor: pointer;
+}

styles/v3/elements/number-input.scss

@@ -0,0 +1,21 @@
+@use "../mixins/material";
+
+.dotdungeon.style-v3 > .window-content input[type=number] {
+	outline: none;
+	border: none;
+	@include material.elevate(3);
+	padding: 4px 8px;
+	color: white;
+	transition: all 200ms ease-in-out;
+	width: 50px;
+	height: auto;
+	text-align: center;
+
+	&:hover {
+		@include material.elevate(4);
+	}
+
+	&:focus-visible {
+		@include material.elevate(6);
+	}
+}

styles/v3/elements/text-input.scss

@@ -1,14 +1,14 @@
 @use "../mixins/material";
 
-.dotdungeon.style-v3 > .window-content input {
+.dotdungeon.style-v3 > .window-content input[type=text] {
 	outline: none;
 	border: none;
 	@include material.elevate(3);
+	padding: 4px 8px;
 	color: white;
 	transition: all 200ms ease-in-out;
 	width: auto;
 	height: auto;
-	font-size: inherit;
 
 	&:hover {
 		@include material.elevate(4);
@@ -17,8 +17,4 @@
 	&:focus-visible {
 		@include material.elevate(6);
 	}
-
-	&.h1 {
-		font-size: 1.5rem;
-	}
 }

styles/v3/elements/utilities.scss

@@ -0,0 +1,5 @@
+.dotdungeon.style-v3 > .window-content {
+	.grow {
+		flex-grow: 1;
+	}
+}

styles/v3/index.scss

@@ -3,8 +3,10 @@
 @use "./themes/dark.css";
 
 /* Element-Styling */
+@use "./elements/utilities.scss";
 @use "./elements/button.scss";
 @use "./elements/text-input.scss";
+@use "./elements/number-input.scss";
 @use "./elements/textarea.scss";
 @use "./elements/headers.scss";
 @use "./elements/hr.scss";

templates/items/untyped/v2/tabs/details.v2.untyped.hbs

@@ -1,9 +1,41 @@
 <div class="tab" data-group="page" data-tab="details">
-	<div class="cost panel">
-		Purchase Cost
+	<div class="cost panel--row">
+		{{#if meta.isEditable}}
+			<label for="{{meta.idp}}-purchase-cost">
+				Purchase Cost
+			</label>
+			<div class="grow"></div>
+			<input
+				type="number"
+				name="system.buy"
+				value="{{system.buy}}"
+				min="0"
+				id="{{meta.idp}}-purchase-cost"
+			>
+		{{else}}
+			Purchase Cost
+			<div class="grow"></div>
+			{{dd-empty-state system.buy}}
+		{{/if}}
 	</div>
-	<div class="usage-cost panel">
-		Usage Cost
+	<div class="usage-cost panel--row">
+		{{#if meta.isEditable}}
+			<label for="{{meta.idp}}-usage-cost">
+				Usage Cost
+			</label>
+			<div class="grow"></div>
+			<input
+				type="number"
+				name="system.usage_cost"
+				value="{{system.usage_cost}}"
+				min="0"
+				id="{{meta.idp}}-usage-cost"
+			>
+		{{else}}
+			Usage Cost
+			<div class="grow"></div>
+			{{dd-empty-state system.usage_cost}}
+		{{/if}}
 	</div>
 	<div class="tier panel">
 		Item Rarity