frontend: make radio buttons responsive

Radio buttons should render large if Font size is increased to
improve accessibility.

Author: thisconnect

frontends/web/src/components/forms/radio.module.css

@@ -13,7 +13,7 @@
     flex-direction: column;
     font-size: var(--size-default);
     margin-right: var(--space-half);
-    padding-left: calc(var(--space-half) + var(--space-quarter));
+    padding-left: calc(1.6rem + var(--space-quarter));
     position: relative;
 }
 
@@ -22,27 +22,27 @@
     background: var(--background-secondary);
     content: '';
     display: inline-block;
-    width: 12px;
-    height: 12px;
+    width: 1.2rem;
+    height: 1.2rem;
     position: absolute;
-    top: 4px;
+    top: .4rem;
     left: 0;
     transition: all 100ms ease;
 }
 
 .radio input + label::before {
-    border: 1px solid var(--background-tertiary);
+    border: var(--border-width) solid var(--background-tertiary);
     border-radius: 1em;
 }
 
 .radio input + label::after {
     background: var(--color-blue);
     border-radius: 1em;
-    width: 10px;
-    height: 10px;
+    width: 1rem;
+    height: 1rem;
     position: absolute;
-    top: 6px;
-    left: 2px;
+    top: .6rem;
+    left: .2rem;
     opacity: 0;
     transform: scale(0);
 }