/*
 * A label and three right-aligned figures — last value, ▲ absolute change,
 * signed relative change (shared/_price_change). A sector's movers, and the
 * watchlist entries.
 */
@layer components {
  .price-change {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    font-size: var(--text-ui);
  }

  .price-change__label {
    flex: none;
    inline-size: 5rem;
  }

  .price-change__figures {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
    text-align: end;
  }

  .price-change__change {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-3xs);
  }
}