@layer components {
  [data-name="checkbox"] {
    @apply flex-col-0 items-center justify-center border-2;
    @apply rounded data-[rounded]:rounded-full;
    transition: var(--coloring-transitions), var(--focus-transitions);

    &:not([data-disabled]) {
      @apply hover:cursor-pointer;
    }
    &[data-disabled] {
      @apply border-on-disabled bg-disabled cursor-not-allowed;
      @apply data-[checked=false]:text-transparent text-on-disabled;
    }
    &:not([data-disabled])[data-invalid] {
      @apply border-negative hover:border-negative-hover;
    }
    &:not([data-disabled])[data-invalid]:not([data-checked="false"]) {
      @apply text-negative bg-negative/20;
    }
    &:not([data-disabled])[data-invalid][data-checked="false"] {
      @apply text-border bg-transparent;
    }
    &:not([data-disabled]):not([data-invalid]):not([data-checked="false"]) {
      @apply bg-primary/40 border-primary text-primary hover:border-primary-hover hover:bg-primary/20;
    }
    &:not([data-disabled]):not([data-invalid])[data-checked="false"] {
      @apply border-border text-border bg-transparent hover:border-primary-hover;
    }

    &[data-size="sm"] {
      @apply size-force-5;
    }
    &[data-size="md"] {
      @apply size-force-6;
    }
    &[data-size="lg"] {
      @apply size-force-8;
    }
  }

  [data-name="checkbox-indicator"] {
    @apply w-full h-full;
    &[data-size="sm"] {
      @apply stroke-3;
    }
    &[data-size="md"] {
      @apply stroke-3;
    }
    &[data-size="lg"] {
      @apply stroke-3;
    }
  }

  .labelled-checkbox-container {
    @apply flex-row-2 items-center;

    &:not([data-disabled]):not([data-readonly]) {
      @apply cursor-pointer;
    }

    &[data-disabled],
    &[data-readonly] {
      @apply cursor-not-allowed text-description;
    }

    &[data-invalid] {
      @apply text-negative;
    }
  }

  .labelled-checkbox-label {
    @apply typography-body-md;
    cursor: inherit;
  }
}