/* Status: the head of a page that reports how something went — an order
   paid, pending, refunded. A round icon in the tone, the title, a line or two.
   data-tone  success | warning | danger | neutral (default) */
.status {
  --status-tone: var(--color-muted);

  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: center;

  p {
    color: var(--color-muted);
    margin-inline: auto;
  }
}

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

.status__icon {
  align-items: center;
  aspect-ratio: 1;
  background: oklch(from var(--status-tone) l c h / 0.14);
  block-size: 3.5rem;
  border-radius: var(--radius-pill);
  color: var(--status-tone);
  display: inline-flex;
  justify-content: center;

  .icon {
    --icon-size: 1.75rem;
  }
}