.banner{border-radius:var(--r-md);background-color:var(--banner-tint);--banner-rail-w:3px;--banner-close-plate:28px;align-items:flex-start;gap:.75rem;min-inline-size:0;padding-block:.75rem;padding-inline:1rem .75rem;display:flex;position:relative}.banner[data-tone=info]{--banner-tone:var(--info);--banner-tint:var(--info-bg)}.banner[data-tone=success]{--banner-tone:var(--success);--banner-tint:var(--success-bg)}.banner[data-tone=warning]{--banner-tone:var(--warning);--banner-tint:var(--warning-bg)}.banner[data-tone=danger]{--banner-tone:var(--danger);--banner-tint:var(--danger-bg)}.banner:before{content:"";inline-size:var(--banner-rail-w);background-color:var(--banner-tone);border-start-start-radius:var(--r-md);border-end-start-radius:var(--r-md);position:absolute;inset-block:0;inset-inline-start:0}.banner__main{flex-wrap:wrap;flex:auto;align-items:flex-start;gap:.625rem 1rem;min-inline-size:0;display:flex}.banner__copy{flex:24rem;min-inline-size:0}.banner__action{flex:0 auto}.banner__stamp{color:var(--banner-tone);font-size:var(--text-2xs);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:var(--tracking-caps);text-transform:uppercase;align-items:center;gap:.375rem;display:flex}.banner__stamp>svg{flex:none}.banner__title{color:var(--fg);font-size:var(--text-base);font-weight:var(--fw-medium);line-height:var(--lh-snug);margin-block-start:.25rem}.banner__text{color:var(--fg-muted);font-size:var(--text-sm);line-height:var(--lh-normal);margin-block-start:.125rem}.banner__code{color:var(--fg-subtle);font-family:var(--type-mono);font-size:var(--text-2xs);line-height:var(--lh-normal);margin-block-start:.375rem}.banner__code>span{-webkit-user-select:all;user-select:all}.banner__close{inline-size:var(--banner-close-plate);block-size:var(--banner-close-plate);border-radius:var(--r-sm);color:var(--fg-muted);transition:background-color calc(var(--duration-fast) * var(--motion-character)) var(--ease-out), color calc(var(--duration-fast) * var(--motion-character)) var(--ease-out);background-color:#0000;border:0;flex:none;place-items:center;display:grid;position:relative}.banner__close:after{content:"";inset:calc((var(--control-h-touch) - var(--banner-close-plate)) / -2);position:absolute}@media (hover:hover){.banner__close:hover{background-color:var(--surface);color:var(--fg)}}