GTK4: Customize check and radio widgets

src/themes/Kali/sass/gtk4/_common-tweaks.scss

@@ -79,6 +79,55 @@ switch {
   }
 }
 
+/*************************
+ * Check and Radio items *
+ *************************/
+check,
+radio {
+  $_c: if($variant=='light', $bg_color, darken($bg_color, 2%));
+  $_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
+
+  background-image: linear-gradient(to bottom, $_c 20%, darken($_c, 2%) 90%);
+  border-color: $alt_borders_color;
+
+  &, &:active { box-shadow: $_widget_inset_shadow; }
+
+  &:checked, &:indeterminate {
+    background-image: linear-gradient(to bottom, $checkradio_bg_color 20%, darken($checkradio_bg_color, 2%) 90%);
+    border-color: $selected_borders_color;
+    color: $selected_fg_color;
+
+    &, &:active { box-shadow: inset 0 1px transparentize(white, .9), $_shadow; }
+
+    &:backdrop {
+      background-image: image($checkradio_bg_color);
+      box-shadow: none;
+    }
+  }
+
+  &:disabled, &:disabled:backdrop {
+    &, &:checked, &:indeterminate {
+      border-color: $borders_color;
+      background-image: image($bg_color);
+      color: $fg_color;
+    }
+  }
+}
+
+radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); }
+
+check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
+
+radio,
+check {
+  &:active { -gtk-icon-transform: scale(0, 1); }
+
+  &:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
+    -gtk-icon-transform: unset;
+    transition: 400ms;
+  }
+}
+
 /************
  * GtkScale *
  ************/