From 4c84bc724d50d50cce5618b861d02ada013873e9 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Fri, 17 Jan 2025 01:06:25 +0200
Subject: [PATCH] style(next): refactor

---
 src/public/stylesheets/theme-next/forms.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css
index 65bdca44e..d3864ee8d 100644
--- a/src/public/stylesheets/theme-next/forms.css
+++ b/src/public/stylesheets/theme-next/forms.css
@@ -188,12 +188,15 @@ optgroup {
 /* The parent label */
 label:has(input[type="radio"]),
 label:has(input[type="checkbox"]) {
+    --box-size: 1em;
+    --box-label-gap: .5em;
+
     position: relative;
 }
 
 label:has(input[type="radio"]),
 label:has(input[type="checkbox"]) {
-    padding-left: 1.5em !important;
+    padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
 }
 
 /* The original input */
@@ -202,7 +205,7 @@ label > input[type="checkbox"] {
     position: absolute;
     top: 0;
     left: 0;
-    width: 1em;
+    width: var(--box-size);
     height: 100%;
     opacity: 0;
 }
@@ -216,8 +219,8 @@ label:has(input[type="checkbox"])::after {
     top: 50%;
     left: 0;
     translate: 0 -50%;
-    width: 1em;
-    height: 1em;
+    width: var(--box-size);
+    height: var(--box-size);
 }
 
 label:has(input[type="radio"]:focus-visible)::before,