@layer infine.components {
/* A link that goes somewhere else in the app: blue-bright, no underline, and an arrow icon after the
   text that nudges right under the pointer, so the page's interactive elements read as one family.
   inline-flex keeps the arrow on the text's last line rather than wrapping alone onto the next. */
.infine-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--infine-blue-bright);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease;
}
.infine-arrow-link svg { flex-shrink: 0; transition: transform 0.18s ease; }
.infine-arrow-link:hover { color: var(--infine-blue); }
.infine-arrow-link:hover svg { transform: translateX(3px); }
}