From d14c25c7fa164e4459cf94ef80008243dd62c5f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Wed, 4 Dec 2024 16:13:12 +0000
Subject: [PATCH] refactor(radio button): simplify CSS selector

Based on @MRita443 's suggestion, add class 'selected' to the label when hovered.

Co-Authored-By: Rita Lopes <93883163+MRita443@users.noreply.github.com>
---
 src/lib/components/forms/radio-buttons.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/forms/radio-buttons.svelte b/src/lib/components/forms/radio-buttons.svelte
index 8dc57f2..c5af066 100644
--- a/src/lib/components/forms/radio-buttons.svelte
+++ b/src/lib/components/forms/radio-buttons.svelte
@@ -14,15 +14,16 @@
     />
     <label
       class="m-1 justify-self-start rounded-lg bg-taupe-200 px-5 py-1 text-rose-950"
+      class:selected={selectedOption === option}
       for="radio-{option}"
     >
       {option}
     </label>
   {/each}
-</div>
+</fieldset>
 
 <style>
-  .radio-button:checked + label {
+  label.selected {
     background-color: theme('colors.muted-red.400');
     color: theme('colors.taupe.100');
   }