refactor: update checkbox and radio styling

src/styles/components.css

@@ -92,7 +92,7 @@
 	/* Input - checkbox and radio */
 	.pdap-input-checkbox,
 	.pdap-input-radio {
-		@apply border-2 border-transparent items-center gap-4 flex-row py-1 px-2 w-auto rounded-md;
+		@apply border-2 border-transparent items-center py-1 px-2 w-auto rounded-md;
 	}
 
 	.pdap-input-checkbox:has(input:checked),
@@ -104,12 +104,46 @@
 
 	.pdap-input input[type='checkbox'], 
 	.pdap-input input[type='radio'] {
-		@apply h-6 w-6 accent-brand-gold;
+		@apply absolute overflow-hidden h-[1px] w-[1px] m-[-1px] p-0 border-0;
+
+		clip: rect(0 0 0 0); 
 	}
+
 
 	.pdap-input input[type='checkbox'] ~ label,
 	.pdap-input input[type='radio'] ~ label {
-		@apply pl-0 w-full max-w-full;
+		@apply pl-0 w-full max-w-full flex gap-4;
+	}
+
+	.pdap-input input[type='checkbox'] ~ label::before,
+	.pdap-input input[type='radio'] ~ label::before {
+		@apply block border-2 border-solid border-neutral-800 h-6 w-6 content-['']; 
+	}
+
+	.pdap-input input[type='checkbox'] ~ label::before {
+		@apply rounded-sm;
+	}
+
+
+	.pdap-input input[type='checkbox']:checked ~ label::before {
+		background-repeat: no-repeat;
+		background-size: 16px 16px;
+		background-position: center;
+		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmYWZmIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+");
+
+		@apply bg-brand-gold;
+	}
+
+
+	.pdap-input input[type='radio'] ~ label::before {
+		@apply rounded-full; 
+	}
+
+	.pdap-input input[type='radio']:checked ~ label::before {
+		box-shadow: inset 0 0 1px 2px rgba(var(--color-brand-gold-600) / 70%),
+								inset 0 0 1px 5px rgba(240 240 240 / 70%);
+
+		@apply bg-brand-gold;
 	}
 
 	.pdap-input input[type='checkbox'],
@@ -139,4 +173,4 @@
 		.pdap-input input:-webkit-autofill:focus {
 			transition: background-color 0s 600000s, color 0s 600000s !important;
 		}
-}
+}