From 1c372415f4504bb619f71f4b888f12d9e8c51699 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Sun, 7 Apr 2024 23:08:41 -0600
Subject: [PATCH] Move the CSS into a path-versioned location

---
 module/components/incrementer.mjs           |  2 +-
 styles/{ => v3}/components/incrementer.scss | 24 ++++++++++++++++-----
 2 files changed, 20 insertions(+), 6 deletions(-)
 rename styles/{ => v3}/components/incrementer.scss (80%)

diff --git a/module/components/incrementer.mjs b/module/components/incrementer.mjs
index 3e5e55f..b543c93 100644
--- a/module/components/incrementer.mjs
+++ b/module/components/incrementer.mjs
@@ -66,7 +66,7 @@ export class DotDungeonIncrementer extends HTMLElement {
 
 	connectedCallback() {
 		if (!DotDungeonIncrementer.styles) {
-			fetch(`./systems/dotdungeon/.styles/components/incrementer.css`)
+			fetch(`./systems/dotdungeon/.styles/v3/components/incrementer.css`)
 			.then(r => r.text())
 			.then(t => {
 				DotDungeonIncrementer.styles = t;
diff --git a/styles/components/incrementer.scss b/styles/v3/components/incrementer.scss
similarity index 80%
rename from styles/components/incrementer.scss
rename to styles/v3/components/incrementer.scss
index 693e0ec..ce5328d 100644
--- a/styles/components/incrementer.scss
+++ b/styles/v3/components/incrementer.scss
@@ -3,6 +3,8 @@ Disclaimer: This CSS is used by a custom web component and is scoped to JUST
 the corresponding web component. Importing this into other files is forbidden.
 */
 
+@use "../mixins/material";
+
 $default-border-radius: 4px;
 $default-height: 1.25rem;
 
@@ -12,11 +14,26 @@ div {
 	// I dunno why this is needed for the height to not be calculated as 17px,
 	// but it is for some arcane reason
 	grid-template-rows: var(--height, $default-height);
+	border-radius: var(--border-radius, $default-border-radius);
+	@include material.elevate(2);
+
+	&:hover {
+		@include material.elevate(4);
+	}
+
+	&:focus-within {
+		@include material.elevate(6);
+	}
+}
+
+button, input {
+	border: none;
+	outline: none;
+	background: none;
+	color: inherit;
 }
 
 input {
-	border: none;
-	outline: none;
 	font-family: inherit;
 	text-align: center;
 	padding: 0;
@@ -30,14 +47,11 @@ input {
 }
 
 button {
-	border: none;
-	outline: none;
 	aspect-ratio: 1 / 1;
 	padding: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: color-mix(in lab, white 5%, transparent);
 
 	&:hover {
 		cursor: pointer;