Sort out panel CSS

src/styles/_common.scss

@@ -1,21 +1,22 @@
+@use "@styles/var";
 @use "@styles/color";
 
 /* Animations */
 
 @-webkit-keyframes fadeIn {
-  from { opacity: 0.3; }
+	from { opacity: 0.3; }
 }
 @-moz-keyframes fadeIn {
-  from { opacity: 0.3; }
+	from { opacity: 0.3; }
 }
 @-ms-keyframes fadeIn {
-  from { opacity: 0.3; }
+	from { opacity: 0.3; }
 }
 @-o-keyframes fadeIn {
-  from { opacity: 0.3; }
+	from { opacity: 0.3; }
 }
 @keyframes fadeIn {
-  from { opacity: 0.3; }
+	from { opacity: 0.3; }
 }
 
 @mixin animate($anim) {
@@ -27,20 +28,7 @@
 }
 
 .flicker {
-    @include animate(fadeIn 0.5s infinite alternate);
-}
-
-@mixin rounded($radius) {
-  -webkit-border-radius: $radius;
-  -moz-border-radius: $radius;
-  -ms-border-radius: $radius;
-  -o-border-radius: $radius;
-  border-radius: $radius;
-}
-
-@mixin drop-shadow($opacity) {
-	filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
-	-webkit-filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
+	@include animate(fadeIn 0.5s infinite alternate);
 }
 
 @mixin no-text-overflow() {
@@ -49,27 +37,36 @@
 	white-space: nowrap;
 }
 
-@keyframes spotlogo {
-    0% {
-        transform: scale(1);
-    }
-    1.25% {
-        transform: scale(1.2);
-    }
-    2.5% {
-        transform: scale(1);
-        transform:rotate(0deg);
-    }
-    5% {
-        transform:rotate(360deg);
-    }
-    100% {
-        transform:rotate(360deg);
-    }
+@keyframes spin {
+	0% {
+		transform: scale(1);
+	}
+	1.25% {
+		transform: scale(1.2);
+	}
+	2.5% {
+		transform: scale(1);
+		transform:rotate(0deg);
+	}
+	5% {
+		transform:rotate(360deg);
+	}
+	100% {
+		transform:rotate(360deg);
+	}
 }
 
 /* Common objects */
 
+@mixin font() {
+	font-family:
+		system-ui,
+		-apple-system,
+		"Segoe UI",
+		Roboto,
+		sans-serif;
+}
+
 *:focus {
 	outline: 0px none transparent;
 }
@@ -87,13 +84,8 @@ textarea:focus, input:focus {
 }
 
 body, textarea, input, button, a.button {
+	@include font();
 	font-size: 14px;
-	font-family:
-		system-ui,
-		-apple-system,
-		"Segoe UI",
-		Roboto,
-		sans-serif;
 	margin: 0;
 }
 
@@ -120,27 +112,27 @@ button, a.button {
 
 input, textarea, button, a.button {
 	border: none;
-	padding: 0.5em 1em;
-	border-radius: 3px;
+	padding: var.$elem-spacing var.$block-spacing;
+	border-radius: var.$block-radius;
 }
 
 h1 {
 	font-size: 2em;
 	font-weight: bold;
-	margin: 1em 0 0.5em;
+	margin: var.$block-spacing 0 0 var.$elem-spacing;
 }
 
 h2 {
 	font-size: 1.2em;
 	font-weight: bold;
-	margin: 1em 0 0.5em;
+	margin: var.$block-spacing 0 0 var.$elem-spacing;
 }
 
 /* Feedback */
 
 .feedback {
 	p {
-		margin: 0 0 1em 0;
+		margin: 0 0 var.$block-spacing 0;
 		&.error {
 			color: color.$error;
 		}