.banner{align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-0);background:var(--banner-tint);color:var(--fg-1);font:var(--t-body);--banner-tint:var(--st-neutral-tint);--banner-mark:var(--st-neutral-mark);display:flex}.banner[data-tone=new]{--banner-tint:var(--st-new-tint);--banner-mark:var(--st-new-mark)}.banner[data-tone=progress]{--banner-tint:var(--st-progress-tint);--banner-mark:var(--st-progress-mark)}.banner[data-tone=waiting]{--banner-tint:var(--st-waiting-tint);--banner-mark:var(--st-waiting-mark)}.banner[data-tone=done]{--banner-tint:var(--st-done-tint);--banner-mark:var(--st-done-mark)}.banner[data-tone=issue]{--banner-tint:var(--st-issue-tint);--banner-mark:var(--st-issue-mark)}.banner__icon{color:var(--banner-mark);margin-block-start:.5px}:lang(ar) .banner__icon{margin-block-start:2px}.banner__text{flex:1;min-inline-size:0}.banner__action{flex:none;align-self:center}.demo-banner{align-items:center;gap:var(--s-3);min-block-size:40px;padding:var(--s-2) var(--page-pad);background:var(--bg-note-strong);color:var(--fg-1);font:var(--t-small);display:flex}.demo-banner>.icon{color:var(--fg-gold)}.demo-banner__text{flex:1;min-inline-size:0}.demo-banner__actions{gap:var(--s-4);flex:none;display:flex}@media (max-width:51.99em){.demo-banner{flex-wrap:wrap}.demo-banner__actions{inline-size:100%;padding-inline-start:32px}}@media (forced-colors:active){.banner,.demo-banner{border:1px solid canvastext}}