/* Tag component styles */
.tag {
  --optical-offset: 0.031em;

  @apply relative inline-flex items-center gap-1 rounded-xl font-medium select-none no-highlight;

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    color 100ms var(--ease-smooth),
    scale 100ms var(--ease-smooth),
    opacity 100ms var(--ease-smooth),
    background-color 100ms var(--ease-smooth),
    box-shadow 100ms var(--ease-out);
  @apply origin-center transform-gpu motion-reduce:transition-none;

  /* Cursor */
  cursor: var(--cursor-interactive);

  /* SVG icon styling */
  & svg {
    @apply pointer-events-none size-3 shrink-0 self-center text-current;
  }
}

/* Disabled state */
.tag:is([data-disabled="true"], [aria-disabled="true"]) {
  @apply status-disabled;
}

/* Focus visible state (keyboard focus only) */
.tag:is(:focus-visible, [data-focus-visible]) {
  @apply status-focused;
}

/* Pressed/Active state */
.tag:is(:active, [data-pressed="true"]) {
}

/* Selected state */
.tag:is([data-selected="true"], [aria-selected="true"]) {
  @apply bg-accent-soft text-accent-soft-foreground;

  /* Selected + Hover state */
  @media (hover: hover) {
    &:is(:hover, [data-hovered="true"]) {
      @apply bg-accent-soft-hover;
    }
  }
}

/* Size */
.tag--sm {
  @apply px-2 py-0.5 text-xs;
}

.tag--md {
  @apply px-2 py-1 text-xs;
}

.tag--lg {
  @apply rounded-2xl px-2.5 py-1.5 text-sm;
}

/* Variant */
.tag--default {
  @apply bg-default text-default-foreground;

  /* Hover state (when not selected or disabled) */
  @media (hover: hover) {
    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
      @apply bg-default-hover;
    }
  }
}

.tag--surface {
  @apply bg-surface text-surface-foreground;

  /* Hover state (when not selected or disabled) */
  @media (hover: hover) {
    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
      @apply bg-surface-hover;
    }
  }
}

/* Remove Button  */
.tag__remove-button {
  @apply size-3 text-inherit;

  /* SVG icon styling */
  & svg {
    @apply size-[inherit] shrink-0 self-center text-current;
  }
}
