/* The type ramp applied, every value a token (`tokens.css` owns the curves and breakpoint;
   `tokens_agreement.test.ts` holds `type_ramp.ts` to them). `display: inline` because a flex or grid
   parent blockifies it anyway, so `width`/`flex` still work. `pre-wrap` keeps a `\n` in data a line break. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-text {
    display: inline;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-regular);
    color: var(--lotics-ink-default);
    text-align: start;
    text-decoration: none;
    text-transform: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-feature-settings: var(--lotics-font-features);
    /* The element under a run may be a control, so everything a UA paints on one is reset and a `render`
       swap changes only semantics; `cursor` follows the element. */
    background: none;
    border: 0 solid var(--border);
    border-radius: 0;
    appearance: none;
  }

  .lotics-text:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  /* The element, not a prop, decides whether a run responds. */
  button.lotics-text,
  a.lotics-text[href] {
    cursor: pointer;
  }

  .lotics-text[data-size="xs"] {
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-xs);
    letter-spacing: var(--lotics-tracking-xs);
  }
  .lotics-text[data-size="sm"] {
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
  }
  .lotics-text[data-size="md"] {
    font-size: var(--lotics-text-md);
    line-height: var(--lotics-leading-md);
    letter-spacing: var(--lotics-tracking-md);
  }
  .lotics-text[data-size="lg"] {
    font-size: var(--lotics-text-lg);
    line-height: var(--lotics-leading-lg);
    letter-spacing: var(--lotics-tracking-lg);
  }
  /* xl = `##` (section), xxl = `#` (page/record title), xxxl = hero numbers. */
  .lotics-text[data-size="xl"] {
    font-size: var(--lotics-text-xl);
    line-height: var(--lotics-leading-xl);
    letter-spacing: var(--lotics-tracking-xl);
  }
  .lotics-text[data-size="xxl"] {
    font-size: var(--lotics-text-xxl);
    line-height: var(--lotics-leading-xxl);
    letter-spacing: var(--lotics-tracking-xxl);
  }
  .lotics-text[data-size="xxxl"] {
    font-size: var(--lotics-text-xxxl);
    line-height: var(--lotics-leading-xxxl);
    letter-spacing: var(--lotics-tracking-xxxl);
  }

  /* A stacked pair; a rung at or below `size + 6` resolves to its prose leading, so every rung can carry a
     rule. */
  .lotics-text[data-leading="tight"][data-size="xs"] {
    line-height: var(--lotics-leading-tight-xs);
  }
  .lotics-text[data-leading="tight"][data-size="sm"] {
    line-height: var(--lotics-leading-tight-sm);
  }
  .lotics-text[data-leading="tight"][data-size="md"] {
    line-height: var(--lotics-leading-tight-md);
  }
  .lotics-text[data-leading="tight"][data-size="lg"] {
    line-height: var(--lotics-leading-tight-lg);
  }
  .lotics-text[data-leading="tight"][data-size="xl"] {
    line-height: var(--lotics-leading-tight-xl);
  }
  .lotics-text[data-leading="tight"][data-size="xxl"] {
    line-height: var(--lotics-leading-tight-xxl);
  }
  .lotics-text[data-leading="tight"][data-size="xxxl"] {
    line-height: var(--lotics-leading-tight-xxxl);
  }

  /* A token with nowhere to break; `break-word` only breaks a word that overflows alone. Opt-in, since
     prose would break mid-word anywhere. */
  .lotics-text[data-wrap="anywhere"] {
    overflow-wrap: anywhere;
  }

  .lotics-text[data-weight="regular"] {
    font-weight: var(--lotics-weight-regular);
  }
  .lotics-text[data-weight="medium"] {
    font-weight: var(--lotics-weight-medium);
  }
  .lotics-text[data-weight="semibold"] {
    font-weight: var(--lotics-weight-semibold);
  }

  .lotics-text[data-color="default"] {
    color: var(--lotics-ink-default);
  }
  .lotics-text[data-color="muted"] {
    color: var(--lotics-ink-muted);
  }
  .lotics-text[data-color="inactive"] {
    color: var(--lotics-ink-inactive);
  }
  .lotics-text[data-color="onInverse"] {
    color: var(--lotics-ink-on-inverse);
  }
  .lotics-text[data-color="danger"] {
    color: var(--lotics-ink-danger);
  }
  .lotics-text[data-color="warning"] {
    color: var(--lotics-ink-warning);
  }
  .lotics-text[data-color="success"] {
    color: var(--lotics-ink-success);
  }

  .lotics-text[data-family="display"] {
    font-family: var(--lotics-font-display);
  }
  .lotics-text[data-family="code"] {
    font-family: var(--font-mono);
  }

  .lotics-text[data-align="left"] {
    text-align: left;
  }
  .lotics-text[data-align="center"] {
    text-align: center;
  }
  .lotics-text[data-align="right"] {
    text-align: right;
  }

  .lotics-text[data-decoration="underline"] {
    text-decoration: underline;
  }
  .lotics-text[data-decoration="line-through"] {
    text-decoration: line-through;
  }
  .lotics-text[data-decoration="underline line-through"] {
    text-decoration: underline line-through;
  }

  .lotics-text[data-transform="uppercase"] {
    text-transform: uppercase;
    /* Uppercase needs positive tracking; the ramp's curve is drawn for lowercase. */
    letter-spacing: var(--lotics-tracking-caps);
  }
  .lotics-text[data-transform="lowercase"] {
    text-transform: lowercase;
  }
  .lotics-text[data-transform="capitalize"] {
    text-transform: capitalize;
  }

  /* Only when asked, so each run otherwise inherits its container's `user-select`. */
  .lotics-text[data-select="none"] {
    user-select: none;
  }
  .lotics-text[data-select="auto"] {
    user-select: auto;
  }
  .lotics-text[data-select="text"] {
    user-select: text;
  }

  /* Without `min-width: 0` a clamped run in a flex row floors at min-content and overflows; only with the
     clamp, since an unclamped run's min-content keeps its longest word inside. */
  .lotics-text[data-clamped] {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lotics-text-lines);
    line-clamp: var(--lotics-text-lines);
    overflow: hidden;
  }
}