add styling to button

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>

frontend/src/components/button.njk

@@ -1,11 +1,62 @@
 <template id="tesoft-button-template">
     <style>
         @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+        }
+
+        button, a {
+            align-content: center;
+            background-color: transparent;
+            border-radius: var(--button-border-radius);
+            border-style: none;
+            color: var(--light-gray);
+            display: grid;
+            font-weight: 600;
+            height: 100%;
+            justify-content: center;
+            padding: var(--medium-padding);
+            text-decoration: none;
+            width: 100%;
+        }
+
+        :host([selected]) button, :host([selected]) a {
+            background-color: var(--light-gray);
+            color: var(--gray);
+            font-weight: 800;
+        }
+
+        button:focus, a:focus {
+            outline-color: var(--gold);
+            outline-offset: 0.2rem;
+            outline-style: solid;
+        }
+
+        button:hover, a:hover {
+            background-color: var(--gold) !important;
+            color: var(--gray);
+            cursor: pointer;
+        }
+
+        ::slotted(svg) {
+            fill: var(--light-gray);
+        }
+
+        :host([selected]) ::slotted(svg) {
+            fill: var(--gray);
+        }
+
+        button:hover ::slotted(svg), a:hover ::slotted(svg) {
+            fill: var(--gray);
+        }
     </style>
 
-    <button>
-        <slot></slot>
-    </button>
+    <div>
+        <button part="children">
+            <slot></slot>
+        </button>
+    </div>
 </template>
 
 <script src="/src/components/button.ts" type="module"></script>