/* Checkbox */
@layer components {
  .field > input[type='checkbox']:not([role='switch']),
  .input[type='checkbox']:not([role='switch']) {
    @apply relative shrink-0 appearance-none outline-none disabled:cursor-not-allowed disabled:opacity-50;
    
    &:checked:after {
      @apply content-[''] block bg-current;
      @apply mask-[image:var(--check-icon)] mask-size-[0.875rem] mask-no-repeat mask-center;
    }
  }
}