.crossLink {
  @apply flex
    flex-col
    items-start
    gap-2
    truncate
    rounded
    border
    border-solid
    border-neutral-300
    bg-white
    p-3
    no-underline
    dark:border-neutral-900
    dark:bg-neutral-950;

  .header {
    @apply flex
      items-center
      gap-2
      self-stretch
      text-xs
      text-neutral-800
      dark:text-neutral-100;

    &.reverse {
      @apply flex-row-reverse
        justify-start;
    }

    .icon {
      @apply size-4
        text-neutral-600
        dark:text-neutral-400;
    }
  }

  .content {
    @apply self-stretch
      truncate
      text-sm
      text-neutral-900
      dark:text-white;

    &.reverse {
      @apply text-right;
    }
  }
}