From 2f34ca863794477c366506a30614a8ccd456652a Mon Sep 17 00:00:00 2001
From: Alexej Rotar <alexejrotar@gmail.com>
Date: Mon, 20 Nov 2023 18:12:46 +0100
Subject: [PATCH] make distinction between selected, unselected and disabled
 radio buttons clearer

---
 styles/components/_form-elements.scss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/styles/components/_form-elements.scss b/styles/components/_form-elements.scss
index 8025e33..ae6e45c 100644
--- a/styles/components/_form-elements.scss
+++ b/styles/components/_form-elements.scss
@@ -112,8 +112,8 @@
 	&:checked {
 		+ .form-input > label {
 			font-weight: typography.$emphasized-weight;
-			color: colors.$teal-800;
-			border-color: colors.$teal-800;
+			color: colors.$gray-50;
+			background-color: colors.$gray-600;
 
 			@include colors.coderdojo-theme {
 				color: colors.$orange-500;
@@ -121,6 +121,7 @@
 
 			&::before {
 				opacity: 1;
+				color: colors.$gray-600;
 			}
 		}
 	}
@@ -130,10 +131,13 @@
 	}
 
 	&:disabled + .form-input > label {
-		background-color: colors.$gray-300;
+		color: colors.$gray-600;
+		border-color: colors.$gray-600;
+		border: 1px solid colors.$gray-300;
 
 		&:hover {
 			cursor: default;
+			background-color: colors.$gray-50;
 		}
 	}
 }