Display: Fix styles for checkboxs and radiobuttons

assets/css/scss/atoms/_checkbox.scss

@@ -1,34 +1,51 @@
 .p-checkbox {
-  @apply h-4 w-4;
+  @apply relative inline-flex select-none align-bottom h-4 w-4;
 
-  .p-checkbox-box {
+  &-input {
-    @apply border border-solid border-gray-50 bg-white h-4 rounded w-4 transition-none invisible;
+    @apply cursor-pointer;
+  }
+
+  &-box {
+    @apply flex justify-center items-center;
+  }
+
+  & &-input {
+    @apply appearance-none absolute top-0 left-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-none border-2 border-support-3 rounded;
+  }
+
+  & &-box {
+    @apply border-2 border-support-3 bg-white w-4 h-4 text-primary rounded transition-none outline-none;
 
     .p-checkbox-icon {
-      @apply text-caption font-semibold text-white;
+      @apply duration-200 text-white text-tiny;
-    }
 
-    &.p-highlight {
+      &.p-icon {
-      @apply border-gray-90 bg-gray-50;
+        @apply w-2.5 h-2.5;
+      }
     }
   }
-  &:not(.p-checkbox-disabled) {
+
+  &.p-highlight &-box {
+    @apply border-primary bg-primary;
+  }
+
+  &:not(.p-disabled):has(&-input:hover) {
     .p-checkbox-box {
-      &:hover {
+      @apply border-primary;
-        @apply border-primary;
-      }
     }
-    .p-checkbox-box.p-focus {
+
-      @apply outline-none outline-offset-0;
+    &.p-highlight .p-checkbox-box {
+      @apply border-primary bg-primary text-white;
     }
-    .p-checkbox-box.p-highlight {
+  }
-      @apply bg-support-4 hover:border-primary;
+
+  &:not(.p-disabled):has(&-input:focus-visible) {
+    .p-checkbox-box {
+      @apply outline-none drop-shadow-lg bg-primary;
     }
   }
-}
+
-.p-checkbox.p-invalid {
+  &.p-invalid > &-box {
-  >.p-checkbox-box {
     @apply border-error;
   }
 }
-

assets/css/scss/atoms/_radio.scss

@@ -1,74 +1,59 @@
-$color_1: #3f3f46;
-$background-color_2: #fafafa;
-$border-color_1: #d4d4d8;
-
 .p-radiobutton {
-  @apply h-4 w-4;
+  @apply relative inline-flex select-none align-bottom w-4 h-4;
 
-  .p-radiobutton-box {
+  &-input {
-    @apply bg-white border border-solid border-gray-50 rounded-full h-4 w-4;
+    @apply cursor-pointer;
-    color: $color_1;
+  }
 
-    &:not(.p-disabled) {
+  &-box {
-      &:not(.p-highlight) {
+    @apply flex justify-center items-center;
-        &:hover {
+  }
-          border-color: $border-color_1;
-        }
-      }
-    }
 
-    &:not(.p-disabled).p-focus {
+  &-icon {
-      @apply outline-none outline-offset-0 border-primary;
+    @apply rounded-full invisible;
-    }
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+  }
 
-    .p-radiobutton-icon {
+  &.p-highlight &-icon {
-      width: 6px;
+    @apply visible;
-      height: 6px;
+    transform: translateZ(0) scale(1, 1);
-      @apply bg-white duration-200;
+  }
-    }
 
-    &.p-highlight {
+  & &-input {
-      @apply bg-primary border-primary;
+    @apply appearance-none absolute top-0 left-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-none border-2 border-support-3;
+  }
 
-      &:not(.p-disabled) {
+  & &-box {
-        &:hover {
+    @apply border-2 border-support-3 bg-white w-4 h-4 text-primary rounded-full transition-none outline-none;
-          @apply bg-primary border-primary text-white;
-        }
-      }
-    }
   }
 
-  &:focus {
+  & &-box &-icon {
-    @apply outline-none;
+    @apply w-1.5 h-1.5 duration-200 bg-white;
   }
 
-  &.p-invalid {
+  &.p-highlight &-box {
-    > .p-radiobutton-box {
+    @apply border-primary bg-primary;
-      @apply border-error;
-    }
   }
-}
 
-.p-input-filled {
+  &:not(.p-disabled):has(&-input:hover) {
-  .p-radiobutton {
     .p-radiobutton-box {
-      background-color: $background-color_2;
+      @apply border-primary;
-
+    }
-      &:not(.p-disabled) {
-        &:hover {
-          background-color: $background-color_2;
-        }
-      }
 
-      &.p-highlight {
+    &.p-highlight .p-radiobutton-box {
-        @apply bg-primary;
+      @apply border-primary bg-primary text-white;
+    }
+  }
 
-        &:not(.p-disabled) {
+  &:not(.p-disabled):has(&-input:focus-visible) {
-          &:hover {
+    .p-radiobutton-box {
-            @apply bg-primary;
+      @apply outline-none drop-shadow-lg bg-primary;
-          }
-        }
-      }
     }
   }
-}
+
+  &.p-invalid > &-box {
+    @apply border-error;
+  }
+}