/* Base link styles */
.link {
  @apply relative inline-flex h-fit w-fit items-center rounded-xl text-sm font-medium text-link underline decoration-separator-tertiary decoration-[1.5px] underline-offset-4 no-highlight;

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

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

  /* Hover state */
  @media (hover: hover) {
    &:hover,
    &[data-hovered="true"] {
      @apply decoration-muted;

      .link__icon {
        @apply opacity-100;
      }
    }
  }

  /* Focus state */
  &:focus-visible:not(:focus),
  &[data-focus-visible="true"] {
    @apply status-focused;

    .link__icon {
      @apply opacity-100;
    }
  }

  /* Disabled state */
  &[aria-disabled="true"] {
    @apply status-disabled;
  }

  .link__icon {
    @apply pointer-events-none inline-flex size-2 shrink-0 items-center justify-center text-current opacity-60;

    /**
     * Transitions
     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
     */
    transition: opacity 150ms var(--ease-out);
    @apply motion-reduce:transition-none;

    & svg {
      @apply transform-gpu;
    }
  }

  .link__icon[data-default-icon="true"] {
    @apply ml-1 pb-1.5;
  }

  /* Handle Link with Button Variants */
  &.button {
    @apply gap-0 no-underline;
  }
}