Add better styling for checkboxes to make them more distinct

styles/elements/input.css

@@ -3,4 +3,54 @@
 		--input-height: 2.5rem;
 		font-size: 1.75rem;
 	}
+
+	&[type="checkbox"] {
+		--checkbox-checked-color: var(--color-warm-1);
+		width: var(--checkbox-size);
+		height: var(--checkbox-size);
+		background: var(--input-background-color);
+		border: 2px solid var(--color-cool-3);
+		position: relative;
+		border-radius: 4px;
+		cursor: pointer;
+
+		&::before, &::after {
+			display: none;
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--checkbox-checked-color);
+			outline-offset: 3px;
+		}
+
+		&:checked::after {
+			display: block;
+			position: absolute;
+			inset: 4px;
+			z-index: 1;
+			content: "";
+			border-radius: 4px;
+			background: var(--checkbox-checked-color);
+			cursor: pointer;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+
+			&::before {
+				display: block;
+				position: absolute;
+				inset: 0;
+				content: "";
+				background: var(--color-level-error-bg);
+				border-radius: 2px;
+				cursor: not-allowed;
+			}
+
+			&::after {
+				cursor: not-allowed;
+			}
+		}
+	}
 }

styles/main.css

@@ -2,6 +2,7 @@
 
 /* Resets */
 @import url("./resets/hr.css") layer(resets);
+@import url("./resets/inputs.css") layer(resets);
 
 /* Themes */
 @import url("./themes/dark.css") layer(themes);

styles/resets/inputs.css

@@ -0,0 +1,8 @@
+.taf > .window-content {
+	input[type="checkbox"] {
+		all: initial;
+		&::after, &::before {
+			all: initial;
+		}
+	}
+}