Tweak Checkbox styles for the actor sheet

styles/generic.scss

@@ -12,6 +12,7 @@ specificity to allow easier overriding without artificially increasing it.
 	--scrollbar-width: 5px;
 	--scrollbar-handle-color: #782e22;
 	--scrollbar-handle-border-color: var(--color-border-highlight);
+	--color-checkbox-checked: inherit;
 	::-webkit-scrollbar {
 		width: var(--scrollbar-width);
 	}

styles/sheets/actor/char-sheet/v2/themes/dark.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $t: transparent;
 
 $background: #0a0a0a;
@@ -22,8 +24,10 @@ $body-font: sans-serif;
 	--tab-font: #{$title-font};
 	--input-font: #{$body-font};
 
+	// Foundry overrides
 	--scrollbar-handle-color: #{$primary};
 	--scrollbar-handle-border-color: color-mix(in lab, white 40%, var(--scrollbar-handle-color));
+	--color-checkbox-checked: #{color.adjust($primary, $lightness: 25%)};
 
 	/* Elevation backgrounds to following Material design */
 	--elevation-0dp-bg: #{$surface};

styles/sheets/actor/char-sheet/v2/v2.scss

@@ -66,6 +66,29 @@
 		opacity: 60%;
 	}
 
+	input[type="checkbox"] {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		border-radius: 2px;
+		margin: 0;
+		cursor: pointer;
+
+		background: var(--elevation-8dp-bg);
+		position: relative;
+		&:checked::before {
+			content: "";
+			background: var(--color-checkbox-checked);
+			border-radius: 3px;
+			$margin: 4px;
+			top: $margin;
+			bottom: $margin;
+			left: $margin;
+			right: $margin;
+			position: absolute;
+		}
+	}
+
 	.page-content {
 		padding: 16px;
 		padding-bottom: 69px;