.c-checkbox {
  @apply flex h-3.5 w-3.5 cursor-pointer items-center justify-center rounded-sm border border-solid border-gray-100-800 bg-elevate;

  &[aria-checked='true'] {
    @apply border-cyan-700-200 bg-cyan-200-700;
  }

  &:focus {
    @apply outline-none ring-1 ring-cyan-700-200 ring-offset-1;
  }

  &:disabled {
    @apply cursor-default opacity-40;
  }

  &:readonly {
    @apply cursor-default;
  }

  &__svg {
    @apply h-2 w-2;

    &-p1 {
      @apply fill-cyan-700-200;
    }
    &-p2 {
      @apply stroke-cyan-700-200;
    }
  }
}
