/* The banner across the top of a record page. The banner's tone colours the icon tile and the
   status line. */

/* Roomier than a stock card, as the banner is the one thing on the page asking to be acted on.
   When the actions wrap onto a line of their own, the row gap sets the actions apart from the
   words. */
.attention-banner {
  column-gap: var(--size-5);
  padding: var(--size-5) var(--size-6);
  row-gap: var(--size-3);
}

/* The section's icon on a square tinted with the status tone. A light tint barely shows on a dark
   background, so dark mode takes more tint than light mode. */
.attention-banner__tile {
  --icon-color: var(--status-tone);
  --icon-size: calc(var(--tile-size) / 2);
  --tile-size: var(--size-11);
  background-color: light-dark(color-mix(in oklab, var(--status-tone) 12%, transparent),
      color-mix(in oklab, var(--status-tone) 18%, transparent));
  block-size: var(--tile-size);
  border-radius: var(--rounded-lg);
  inline-size: var(--tile-size);
}

/* The words take the room the tile and the actions leave. Once that room is narrower than a
   readable column, the actions wrap together onto a line of their own. Tighter line spacing
   than the rest of the page makes the words read as one block. */
.attention-banner__body {
  flex: 1 1 var(--size-64);
  line-height: var(--leading-snug);
  min-inline-size: 0;
  row-gap: var(--size-1);
}

.attention-banner__status {
  color: var(--status-tone);
}