/* Notice: a short message set into the page — a hold running out, a refund,
   a closed sale. Its tone colours the tint and the icon.
   data-tone  info (default, neutral: the accent may be red) | success |
              warning | danger */
.notice {
  --notice-tone: var(--color-muted);

  align-items: center;
  background: oklch(from var(--notice-tone) l c h / 0.12);
  border-radius: var(--radius-m);
  color: var(--color-text);
  display: flex;
  font-size: var(--step--1);
  gap: var(--space-xs);
  line-height: var(--leading-snug);
  padding: var(--space-xs) var(--space-s);
  text-wrap: balance;
}

.notice[data-tone="success"] { --notice-tone: var(--color-green); }
.notice[data-tone="warning"] { --notice-tone: var(--color-amber); }
.notice[data-tone="danger"] { --notice-tone: var(--color-red); }

.notice__icon {
  align-items: center;
  background: oklch(from var(--notice-tone) l c h / 0.2);
  block-size: 2rem;
  border-radius: var(--radius-pill);
  color: var(--notice-tone);
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 2rem;
  justify-content: center;
}

/* A running clock turns the notice red in its last minute (countdown sets data-ending) */
.notice[data-ending] {
  --notice-tone: var(--color-red);
}

/* A value set off inside the notice, tinted in its tone: the time left */
.notice__badge {
  background: oklch(from var(--notice-tone) l c h / 0.2);
  border-radius: var(--radius-s);
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  padding: 0 var(--space-2xs);
}