Rewrite checkbox for better performance + improve disabled state

war/src/main/less/modules/form.less

@@ -421,27 +421,47 @@
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
 
-  &:focus + label:before, &:active + label:before {
-    border-width: 5px;
-    border-color: var(--focus-input-border);
-    box-shadow: var(--form-input-glow--focus);
-  }
+  &:not(:disabled) {
+    &:checked {
+      & + label {
+        &:active,
+        &:focus {
+          &::before {
+            box-shadow: 0 0 0 5px var(--focus-input-glow), inset 0 0 0 12px var(--focus-input-border);
+          }
+        }
+      }
 
-  &:checked + label:before {
-    border: 11px solid var(--focus-input-border);
-  }
+      & + label {
+        &::before {
+          box-shadow: 0 0 0 10px transparent, inset 0 0 0 12px var(--focus-input-border);
+        }
 
-  &:checked + label:after {
-    transform: scale(1)!important;
+        &::after {
+          transform: scale(1);
+        }
+      }
+    }
   }
 
   &:disabled {
     & + label {
-      cursor: default;
-      pointer-events: none;
+      cursor: not-allowed;
 
       &::before {
-        opacity: 0.3 !important;
+        opacity: 0.35 !important;
+        box-shadow: 0 0 0 10px transparent, inset 0 0 0 2px var(--input-border) !important;
+      }
+    }
+
+    &:checked {
+      & + label {
+        &::before {
+          box-shadow: 0 0 0 10px transparent, inset 0 0 0 12px var(--focus-input-border) !important;
+        }
+        &::after {
+          transform: scale(1) !important;
+        }
       }
     }
   }
@@ -458,16 +478,15 @@
   font-weight: 600;
 
   &::before {
-    display: inline-block;
     content: "";
+    display: inline-block;
     position: relative;
     min-width: 22px;
     min-height: 22px;
-    border: 2px solid var(--input-border);
     border-radius: 6px;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
     margin-right: 11px;
-    box-shadow: 0 0 0 10px transparent;
+    box-shadow: 0 0 0 10px transparent, inset 0 0 0 2px var(--input-border);
   }
 
   &::after {
@@ -478,34 +497,33 @@
     position: absolute;
     top: 0;
     left: 0;
-    right: 0;
     width: 22px;
     height: 22px;
     background: var(--background);
     mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='384px' height='320px' viewBox='0 0 384 320' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3ePath%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cpath d='M327.917546,10.9278525 C339.555371,-2.37251966 359.771775,-3.72027991 373.072147,7.91754577 C386.239516,19.4389932 387.692129,39.368305 376.427694,52.671077 L376.082454,53.0721475 L152.082454,309.072147 C140.014868,322.863675 118.889432,323.700972 105.767743,311.015951 L105.372583,310.627417 L9.372583,214.627417 C-3.12419433,202.13064 -3.12419433,181.86936 9.372583,169.372583 C21.7443926,157.000773 41.7261905,156.877055 54.2501999,169.001429 L54.627417,169.372583 L126.441,241.186 L327.917546,10.9278525 Z' id='Path' fill='%23FF0000' fill-rule='nonzero'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
     mask-size: 10px 10px;
     mask-repeat: no-repeat;
     mask-position: center;
-    transition: var(--standard-transition);
+    transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5);
     transform: scale(0);
   }
 
-  &:hover {
+  &:empty {
     &::before {
-      border: 5px solid var(--input-border-hover);
+      margin-right: 0;
     }
   }
 
-  &:active, &:focus {
+  &:hover {
     &::before {
-      border: 5px solid var(--focus-input-border);
-      box-shadow: 0 0 0 5px var(--focus-input-glow);
+      box-shadow: 0 0 0 10px transparent, inset 0 0 0 5px var(--input-border-hover);
     }
   }
 
-  &:empty {
+  &:active,
+  &:focus {
     &::before {
-      margin-right: 0;
+      box-shadow: 0 0 0 5px var(--focus-input-glow), inset 0 0 0 5px var(--focus-input-border);
     }
   }
 }