Fix radio button styling when input is inside label

Author: C-Lodder

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## WIP
+- Fix radio button styling when input is inside label
 - Fix PHP 8.1+ deprecation notices
 
 ## 1.4.1

src/css/elements/forms/radio-buttons.css

@@ -1,71 +1,41 @@
 /* radio buttons */
 
 .radio {
-  position: relative;
+  display: block;
+  min-height: 1.5rem;
+  padding-inline-start: var(--hiq-radio-label-padding-horizontal);
+  margin-bottom: var(--hiq-radio-margin-bottom);
 
   & label {
-    position: relative;
-    margin-bottom: var(--hiq-radio-margin-bottom);
-    padding: 0 var(--hiq-radio-label-padding-horizontal);
-    font-weight: var(--hiq-radio-label-font-weight) !important;
-    line-height: 1;
-    cursor: pointer;
-    user-select: none;
+    display: inline-block;
+    margin-bottom: 0;
+    font-weight: var(--hiq-radio-label-font-weight);
+  }
 
-    /* style `::before` to look like radio button */
-    &::before {
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: var(--hiq-radio-width);
-      height: var(--hiq-radio-height);
-      border: var(--hiq-radio-border-width) solid var(--hiq-radio-border-color);
-      border-radius: var(--hiq-radio-border-radius);
-      background-color: var(--hiq-radio-background-color);
-      transition: background-color var(--hiq-speed) var(--hiq-easing);
-      content: '';
-    }
+  input {
+    width: var(--hiq-radio-width);
+    height: var(--hiq-radio-height);
+    margin-top: .25em;
+    margin-inline-start: -1.5em;
+    vertical-align: top;
+    background-color: var(--hiq-radio-background-color);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    appearance: none;
   }
 
-  /* visually hide input */
   & input[type='radio'] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    pointer-events: none;
-
-    &:hover + label::before {
-      background-color: var(--hiq-radio-hover-background-color);
-    }
-
-    &:focus + label::before {
-      background-color: var(--hiq-radio-focus-background-color);
-      outline: var(--hiq-outline-color) solid var(--hiq-outline-width);
-    }
+    border-radius: var(--hiq-radio-border-radius);
 
-    &:checked + label::before,
-    &[aria-checked] + label::before {
-      border-color: var(--hiq-radio-checked-border-color);
+    &:checked {
+      background-image: var(--hiq-radio-background-image);
       background-color: var(--hiq-radio-checked-background-color);
+      border-color: var(--hiq-radio-checked-border-color);
     }
 
-    /* style `::after` to look like radio button fill */
-    &:checked + label::after,
-    &[aria-checked] + label::after {
-      display: block;
-      position: absolute;
-      top: 50%;
-      left: calc(var(--hiq-radio-width) / 2);
-      width: var(--hiq-radio-check-width);
-      height: var(--hiq-radio-check-height);
-      border-radius: var(--hiq-radio-check-border-radius);
-      background-color: var(--hiq-radio-check-background-color);
-      transform: translate(-50%, -50%);
-      content: '';
+    &:focus {
+      outline: var(--hiq-outline-color) solid var(--hiq-outline-width);
     }
 
     :--not-writable + label {
@@ -77,7 +47,7 @@
       cursor: not-allowed;
     }
 
-    :--not-writable + label::before {
+    :--not-writable {
       background-color: var(--hiq-disabled-background-color);
     }
   }

src/css/variables.css

@@ -275,23 +275,17 @@
   --hiq-checkbox-indeterminate-width: .5rem;
 
   /* radio buttons */
-  --hiq-radio-margin-bottom: .5rem;
-  --hiq-radio-label-padding-horizontal: 2rem;
+  --hiq-radio-margin-bottom: .125rem;
+  --hiq-radio-label-padding-horizontal: 1.5em;
   --hiq-radio-label-font-weight: var(--hiq-font-weight-normal);
-  --hiq-radio-width: 1rem;
-  --hiq-radio-height: 1rem;
-  --hiq-radio-border-width: 1px;
-  --hiq-radio-border-color: transparent;
+  --hiq-radio-width: 1.2rem;
+  --hiq-radio-height: 1.2rem;
   --hiq-radio-border-radius: 50%;
   --hiq-radio-background-color: var(--hiq-color-gray-6);
-  --hiq-radio-hover-background-color: var(--hiq-color-gray-5);
-  --hiq-radio-focus-background-color: var(--hiq-color-gray-5);
   --hiq-radio-checked-border-color: var(--hiq-color-primary);
   --hiq-radio-checked-background-color: var(--hiq-color-primary);
-  --hiq-radio-check-width: .5rem;
-  --hiq-radio-check-height: .5rem;
-  --hiq-radio-check-border-radius: 50%;
   --hiq-radio-check-background-color: hsl(0, 0%, 100%);
+  --hiq-radio-background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='%23fff'/></svg>");
 
   /* range inputs */
   --hiq-range-input-thumb-width: 1.5rem;