/*
 * Underlined text that NAVIGATES. The blue is the promise of a trip, so it is
 * spent only where the run actually takes one — and what says so is the ELEMENT:
 * `Text` renders an `<a>` exactly when it was given an `href`, so a marker that
 * merely opens a peek stays neutral with no second flag to keep in step.
 *
 * `:not([data-color])` is the caller's own ink winning, and it has to be the
 * ABSENCE of the attribute rather than its `default` value: `default` is a real
 * ink a caller can ask for, and matching it would repaint an explicit "leave
 * this neutral" blue. It also outranks `Text`'s own `[data-color]` rules, so the
 * pair does not depend on which sheet a bundler emits first.
 *
 * A leading icon turns the run into 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 RULE IS DRAWN ON REACH. The underline at rest is
     the browser's own default dressed in a token, and a contacts row wearing it
     three times reads as a page of hyperlinks rather than as the three ways to
     reach one party. A run with NO anchor keeps its rest underline: a marker or
     an in-prose disclosure carries no ink of its own, so the rule is the whole
     of what it has.

     The class is written TWICE on purpose: the run's own `[data-decoration]`
     rule is two selectors deep, so a rule that named the class once would tie
     with it and resolve on whichever sheet a bundler emitted first. Repeating
     our OWN class buys the rung without the sheet reaching for another
     component's. */
  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);
  }
}