/* One valence ink on the root, read by the glyph and every text run, since `Text` paints its own colour;
   anchored on the root because a bare `.lotics-trend__label` ties with `.lotics-text` and would resolve on
   source order. The chip takes the control radius outright, having no rounded host; an inset off a
   themeable rung would square it beside `Chip` and `Status`. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-trend {
    --lotics-trend-ink: var(--lotics-ink-muted);
    color: var(--lotics-trend-ink);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    gap: var(--lotics-space-4);
  }

  .lotics-trend[data-tone="success"] {
    --lotics-trend-ink: var(--lotics-ink-success);
  }

  .lotics-trend[data-tone="danger"] {
    --lotics-trend-ink: var(--lotics-ink-danger);
  }

  /* In a wrap-row the number must not break, so the chip moves to the next line; `flex-shrink` stops it
     folding "↑ 12%" at 375. */
  .lotics-trend[data-variant="chip"] {
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    padding-inline: var(--lotics-space-6);
    padding-block: var(--lotics-space-2);
    border-radius: var(--lotics-radius-control);
    background-color: var(--lotics-tone-zinc);
  }

  .lotics-trend[data-variant="chip"][data-tone="success"] {
    background-color: var(--lotics-tone-green);
  }

  .lotics-trend[data-variant="chip"][data-tone="danger"] {
    background-color: var(--lotics-tone-red);
  }

  .lotics-trend__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
  }

  .lotics-trend[data-tone] .lotics-trend__label {
    color: var(--lotics-trend-ink);
  }
}