From 70332e6fda8e2185cbcdcb29a0d5dd67084439e5 Mon Sep 17 00:00:00 2001
From: David Lapshin <ddaudix@gmail.com>
Date: Sun, 26 May 2024 21:46:43 +0300
Subject: [PATCH] Make input styles more DRY and fix the opacity transition for
 radios

---
 sass/_input.scss | 37 +++----------------------------------
 1 file changed, 3 insertions(+), 34 deletions(-)

diff --git a/sass/_input.scss b/sass/_input.scss
index 446f403..7bb2276 100644
--- a/sass/_input.scss
+++ b/sass/_input.scss
@@ -14,6 +14,7 @@ input[type="checkbox"] {
 		display: block;
 		position: absolute;
 		transform: scale(0);
+		opacity: 0;
 		transition-duration: var(--transition);
 		transition-property: transform, opacity;
 		background-color: white;
@@ -56,11 +57,11 @@ input[type="radio"] {
 	border-radius: 50%;
 
 	&::before {
+		top: 0.125rem;
+		left: 0.125rem;
 		border-radius: 50%;
 		width: 0.5rem;
 		height: 0.5rem;
-		top: 0.125rem;
-		left: 0.125rem;
 	}
 }
 
@@ -74,42 +75,10 @@ input[type="checkbox"] {
 		top: -0.125rem;
 		left: -0.125rem;
 		transform-origin: bottom left;
-		opacity: 0;
 		mask-image: $checkmark-icon;
 		mask-size: cover;
 		width: 1rem;
 		height: 1rem;
 		content: "";
 	}
-
-	&:hover {
-		background-color: var(--fg-muted-2);
-	}
-
-	&:checked {
-		border: 0.15rem solid transparent;
-		background-color: var(--primary-color);
-
-		&:disabled {
-			cursor: not-allowed;
-			border: 0.15rem solid transparent;
-			background-color: var(--primary-color-alpha);
-
-			&::before {
-				opacity: 0.8;
-				background-color: var(--fg-color);
-			}
-		}
-
-		&::before {
-			transform: scale(1);
-			opacity: 1;
-		}
-	}
-
-	&:disabled {
-		cursor: not-allowed;
-		border: 0.15rem solid var(--fg-muted-1);
-		background-color: var(--fg-muted-1);
-	}
 }