@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.alert-demo-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  width:          100%;
  max-width:      36rem;
}

.callout.alert.alert-demo-amber {
  border-color: var(--warning);
  background:   color-mix(in oklab, var(--warning-soft) 60%, var(--bg));
  color:        var(--ink);
}

/* Reserves the triggered alert's box so showing it moves nothing below. */
.alert-demo-slot {
  min-height: calc(var(--surface-padding-sm) * 2 + 2lh + var(--space-0-5));
}