@layer m3-components{.m3-banner{min-width:0;grid-template-rows:1fr;inline-size:100%;display:grid;container:m3-banner/inline-size}.m3-banner__clip{min-width:0;min-height:0}.m3-banner__box{--_bg:color-mix(in srgb, var(--md-sys-color-info-container) 55%, var(--md-sys-color-surface));--_fg:var(--md-sys-color-on-info-container);--_accent:var(--md-sys-color-info);align-items:center;gap:var(--md-sys-space-4);padding:14px var(--md-sys-space-4);border-radius:max(var(--m3-ir,0px),var(--md-sys-shape-corner-large-increased));background:var(--_bg);color:var(--_fg);display:flex}.m3-banner__box[data-tone=success]{--_bg:color-mix(in srgb, var(--md-sys-color-success-container) 55%, var(--md-sys-color-surface));--_fg:var(--md-sys-color-on-success-container);--_accent:var(--md-sys-color-success)}.m3-banner__box[data-tone=warning]{--_bg:color-mix(in srgb, var(--md-sys-color-warning-container) 55%, var(--md-sys-color-surface));--_fg:var(--md-sys-color-on-warning-container);--_accent:var(--md-sys-color-warning)}.m3-banner__box[data-tone=error]{--_bg:color-mix(in srgb, var(--md-sys-color-error-container) 55%, var(--md-sys-color-surface));--_fg:var(--md-sys-color-on-error-container);--_accent:var(--md-sys-color-error)}.m3-banner__mark{--_m:36px;width:var(--_m);height:var(--_m);background:color-mix(in srgb,var(--_accent) 16%,transparent);--m3-icon-size:20px;border-radius:50%;flex:none;place-items:center;display:grid}.m3-banner__icon{color:var(--_accent)}.m3-banner__box[data-tall]{align-items:flex-start}.m3-banner__main{align-items:center;gap:var(--md-sys-space-2) var(--md-sys-space-4);flex-wrap:wrap;flex:1;min-width:0;display:flex}.m3-banner__content{flex:16rem;gap:2px;min-width:0;display:grid}.m3-banner__text,.m3-banner__title{overflow-wrap:anywhere;margin:0}.m3-banner__text a{color:inherit}.m3-banner__text:empty{display:none}.m3-banner__actions{align-items:center;gap:var(--md-sys-gap-inline);flex-wrap:wrap;margin-inline-start:auto;display:flex}.m3-banner__actions .m3-btn:is([data-variant=text],[data-variant=outlined]){--_label:var(--_fg)}.m3-banner__actions .m3-btn[data-variant=outlined]{--_outline:color-mix(in srgb, var(--_fg) 40%, transparent)}.m3-banner__box .m3-banner__close{--m3-sl:var(--_fg);--_icon-c:var(--_fg);flex:none;margin-block:-4px;margin-inline-end:-4px}.m3-banner__box[data-tall] .m3-banner__close{margin-block:2px 0}@container m3-banner (width<480px){.m3-banner__actions{flex:100%;justify-content:flex-end;gap:0;margin-inline-end:calc(-1 * var(--md-sys-space-2))}.m3-banner__actions .m3-btn[data-variant=text]{--_px:var(--md-sys-space-2)}}.m3-banner-enter-active{transition:grid-template-rows var(--md-sys-motion-t-medium),opacity var(--md-sys-motion-t-fx-medium)}.m3-banner-leave-active{transition:grid-template-rows var(--md-sys-motion-t-small-out),opacity var(--md-sys-motion-dur-micro-out) var(--md-sys-motion-exit)}.m3-banner-enter-from,.m3-banner-leave-to{opacity:0;grid-template-rows:0fr}.m3-banner-enter-active .m3-banner__clip,.m3-banner-enter-from .m3-banner__clip,.m3-banner-leave-active .m3-banner__clip,.m3-banner-leave-to .m3-banner__clip{overflow:hidden}}@layer m3-density{:root[data-density=compact] .m3-banner__box{padding:10px var(--md-sys-space-3);gap:var(--md-sys-space-2) var(--md-sys-space-3);border-radius:max(var(--m3-ir,0px),var(--md-sys-shape-corner-large))}:root[data-density=compact] .m3-banner__mark{--_m:32px}}