/*
 * A CHANGE AGAINST A PREVIOUS PERIOD, in two forms.
 *
 * ONE declaration of the valence ink, on the root, read by the glyph and by
 * every run of text under it — a `Text` paints its own colour rather than
 * inheriting, so without the shared property the same shade would be written
 * twice and the two halves of one statement could come apart. The ink selector
 * is anchored on the ROOT for a second reason: a bare
 * `.lotics-trend__label` TIES with `.lotics-text`'s own `color` at one class
 * each, so the ink would resolve on source order.
 *
 * The chip's corner is the control rung OUTRIGHT. It is a box of its own on the
 * canvas with no rounded host to sit concentric inside, so there is no inner
 * corner to derive: an inset off the rung would subtract a fixed length from a
 * themeable one and square the chip on every theme whose `--radius` reaches the
 * inset, while `Chip` and a tonal `Status` beside it stayed round.
 */
@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);
    /* The valence, on the surface that owns it: the glyph inherits it and the
       label states it, so the pair cannot come apart. */
    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);
  }

  /* THE CHIP DROPS TO THE NEXT LINE; IT NEVER SQUASHES. In a wrap-row — a
     labelled `Metric`'s value beside its delta — the number must not break, so the chip
     is the item that moves. A flex item shrinks by default, so at 375 the chip
     folded "↑ 12%" onto two lines until `flex-shrink` above said otherwise. */
  .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);
  }
}