Styling of home

components/home/GroupBox/GroupBox.module.css

@@ -1,24 +1,53 @@
 .root {
     position: relative;
-    border: 2px solid black;
     padding: 1em 0.5em;
+    border: 1px solid var(--md-sys-color-outline);
+    background-color: var(--md-sys-color-surface);
+    border-radius: 4px;
+}
+
+.heading {
+    display: inline-block;
+    margin-block-start: 0;
+}
+
+.heading:not(:focus-visible)::after {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: var(--md-sys-color-on-background);
+    content: "";
+    mask: url("/factorio/pencil.svg") no-repeat 50% 50%;
+    opacity: 0.8;
+    padding-inline-start: 0.5em;
 }
 
 .quit {
-    --color: darkred;
+    --color: var(--md-sys-color-error);
+
     position: absolute;
-    right: 1em;
-    top: 1em;
-    border-radius: 999999px;
-    background: transparent;
     border: 1px solid var(--color);
+    background: transparent;
+    border-radius: 999999px;
     color: var(--color);
-    font-weight: 700;
+    font-weight: 500;
+    inset-block-start: 1em;
+    inset-inline-end: 1em;
 }
 
 .quit:is(:focus, :hover) {
-    --color: red;
-    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
+    --color: var(--md-ref-palette-error60);
+
+    filter: drop-shadow(0 0 2px var(--md-ref-palette-neutral-variant70));
+}
+
+.label {
+    display: block;
+}
+
+.marginTop {
+    display: block;
+    margin-block-start: 1em;
 }
 
 .flex {
@@ -30,18 +59,3 @@
 .flex > * {
     width: max-content;
 }
-
-@media (prefers-color-scheme: dark) {
-    .root {
-        border-color: gray;
-    }
-
-    .quit {
-        --color: indianred;
-    }
-
-    .quit:is(:focus, :hover) {
-        --color: red;
-        filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.5));
-    }
-}