/* Underlined text that navigates; the blue is spent only where the element is an `<a>` (`Text` renders one
   exactly when given `href`), so a peek marker stays neutral. `:not([data-color])` because `default` is a
   real ink a caller may ask for; it also outranks `Text`'s `[data-color]` rules regardless of sheet order.
   A leading icon makes the run a row, which an inline box cannot be. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  a.lotics-text-link:not([data-color]) {
    color: var(--lotics-accent);
  }

  /* An anchor is inked, so its underline shows on reach only; three resting underlines in a contacts row
     read as hyperlinks. A run with no anchor keeps its rest underline, its only mark. The class is doubled
     to beat the run's two-selector `[data-decoration]` rule without depending on sheet order. */
  a.lotics-text-link.lotics-text-link {
    text-decoration-line: none;
  }

  a.lotics-text-link.lotics-text-link:hover,
  a.lotics-text-link.lotics-text-link:focus-visible {
    text-decoration-line: underline;
  }

  .lotics-text-link:has(.lotics-text-link__icon) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-4);
  }
}