/*
 * The homepage treemap's tooltip, sector labels and tile labels. Highcharts builds this
 * markup as HTML strings in treemap_chart_controller.js, so these classes are
 * the controller's; the tile's own colour and ink are data, set inline.
 */
@layer pages {
  .treemap-tooltip {
    padding: var(--space-xs);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    line-height: var(--leading-meta);

    & table {
      border-collapse: collapse;
    }
  }

  .treemap-tooltip__title {
    margin-block-end: var(--space-2xs);
    padding-inline: var(--space-2xs);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-semibold);
  }

  .treemap-tooltip__ticker {
    padding: var(--space-3xs) var(--space-2xs);
    font-weight: var(--weight-medium);
  }

  .treemap-tooltip__company {
    font-size: var(--text-meta-xs);
    font-weight: var(--weight-regular);
  }

  .treemap-tooltip__figure {
    padding: var(--space-3xs) var(--space-2xs) var(--space-3xs) var(--space-md);
    font-variant-numeric: tabular-nums lining-nums;
    text-align: end;
  }

  .treemap-tooltip__current > td {
    padding-block: var(--space-2xs);
  }

  /* A sector's name in small caps with its change beside it, on a white slip
     at the top of its block. */
  .treemap-sector {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-xs);
    background-color: var(--color-surface);
    color: var(--color-ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-table-head);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .treemap-sector__change {
    font-size: var(--text-meta);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums lining-nums;
  }

  .treemap-tile {
    font-family: var(--font-ui);
    text-align: center;
    line-height: 1.25;
  }

  .treemap-tile__ticker {
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
  }

  .treemap-tile__change {
    font-size: var(--text-meta-xs);
    font-variant-numeric: tabular-nums lining-nums;
  }
}