@shopify/polaris/dist/esnext/components/Banner/Banner.css

Shopify’s product component library

.Polaris-Banner_z4w8k{ --p-rgb-text:33, 43, 54; position:relative; display:flex; }

.Polaris-Banner__ContentWrapper_1yvfo{ flex:1 1 auto; }

.Polaris-Banner--withinContentContainer_1uwmg{ padding:0.8rem 1.2rem; --p-banner-background:var(--p-background); --p-banner-border:var(--p-banner-border-default); transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); transition-delay:100ms; box-shadow:var(--p-banner-border, none); border-radius:var(--p-border-radius-base, 3px); position:relative; background-color:var(--p-banner-background, #f4f6f8); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--newDesignLanguage_1rik8{ padding:1.6rem 1.6rem 1.4rem; }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--newDesignLanguage_1rik8 .Polaris-Banner__ContentWrapper_1yvfo{ margin-top:-0.2rem; }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--newDesignLanguage_1rik8 .Polaris-Banner__Dismiss_z8d6a{ top:1.6rem; }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--newDesignLanguage_1rik8 .Polaris-Banner__Ribbon_r8z8p{ padding-right:1.6rem; }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinContentContainer_1uwmg{ outline:1px solid; } }

.Polaris-Banner--withinContentContainer_1uwmg::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-Banner--withinContentContainer_1uwmg:focus{ outline:none; }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-border, #637381), inset 0 0 0 3px var(--p-border, #637381), 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--keyFocused_1aqee::after{ outline:1px solid windowText; } }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusSuccess_pc5rl{ --p-banner-background:var(--p-surface-success-subdued); --p-banner-border:var(--p-banner-border-success); transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); transition-delay:100ms; box-shadow:var(--p-banner-border, none); border-radius:var(--p-border-radius-base, 3px); position:relative; background-color:var(--p-banner-background, #eff7ed); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusSuccess_pc5rl{ outline:1px solid; } }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusSuccess_pc5rl::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusSuccess_pc5rl:focus{ outline:none; }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusSuccess_pc5rl.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #50b83c), inset 0 0 0 3px var(--p-override-none, #50b83c), 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusSuccess_pc5rl.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusSuccess_pc5rl.Polaris-Banner--keyFocused_1aqee::after{ outline:1px solid windowText; } }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusInfo_knr66{ --p-banner-background:var(--p-surface-highlight-subdued); --p-banner-border:var(--p-banner-border-highlight); transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); transition-delay:100ms; box-shadow:var(--p-banner-border, none); border-radius:var(--p-border-radius-base, 3px); position:relative; background-color:var(--p-banner-background, #eef9f9); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusInfo_knr66{ outline:1px solid; } }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusInfo_knr66::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusInfo_knr66:focus{ outline:none; }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusInfo_knr66.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #47c1bf), inset 0 0 0 3px var(--p-override-none, #47c1bf), 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusInfo_knr66.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusInfo_knr66.Polaris-Banner--keyFocused_1aqee::after{ outline:1px solid windowText; } }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusWarning_1x66d{ --p-banner-background:var(--p-surface-warning-subdued); --p-banner-border:var(--p-banner-border-warning); transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); transition-delay:100ms; box-shadow:var(--p-banner-border, none); border-radius:var(--p-border-radius-base, 3px); position:relative; background-color:var(--p-banner-background, #fdf7e3); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusWarning_1x66d{ outline:1px solid; } }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusWarning_1x66d::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusWarning_1x66d:focus{ outline:none; }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusWarning_1x66d.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #eec200), inset 0 0 0 3px var(--p-override-none, #eec200), 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusWarning_1x66d.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusWarning_1x66d.Polaris-Banner--keyFocused_1aqee::after{ outline:1px solid windowText; } }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusCritical_1iy3d{ --p-banner-background:var(--p-surface-critical-subdued); --p-banner-border:var(--p-banner-border-critical); transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); transition-delay:100ms; box-shadow:var(--p-banner-border, none); border-radius:var(--p-border-radius-base, 3px); position:relative; background-color:var(--p-banner-background, #fdf3f0); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusCritical_1iy3d{ outline:1px solid; } }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusCritical_1iy3d::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusCritical_1iy3d:focus{ outline:none; }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusCritical_1iy3d.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #de3618), inset 0 0 0 3px var(--p-override-none, #de3618), 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusCritical_1iy3d.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusCritical_1iy3d.Polaris-Banner--keyFocused_1aqee::after{ outline:1px solid windowText; } }

.Polaris-Banner--withinContentContainer_1uwmg + .Polaris-Banner_z4w8k{ margin-top:0.8rem; }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Ribbon_r8z8p{ padding-right:1.2rem; }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Actions_17m67{ padding:1.2rem 0 0.4rem 0; }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Dismiss_z8d6a{ right:1.2rem; top:1.2rem; position:absolute; }

.Polaris-Banner--withinPage_kguwn{ border-radius:0 0 3px 3px; padding:1.6rem; --p-banner-background:var(--p-background); --p-banner-border:var(--p-banner-border-default); transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); transition-delay:100ms; border-radius:var(--p-border-radius-wide, 0 0 3px 3px); box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-border, #637381), inset 0 0 0 0 transparent, 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); position:relative; background-color:var(--p-banner-background, #f4f6f8); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--newDesignLanguage_1rik8{ padding:2rem 2rem 1.8rem; }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--newDesignLanguage_1rik8 .Polaris-Banner__ContentWrapper_1yvfo{ margin-top:-0.2rem; }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinPage_kguwn{ outline:1px solid; } }

.Polaris-Banner--withinPage_kguwn::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-wide) + 0.1rem); }

.Polaris-Banner--withinPage_kguwn:focus{ outline:none; }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-border, #637381), inset 0 0 0 3px var(--p-border, #637381), 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinPage_kguwn.Polaris-Banner--keyFocused_1aqee::after{ outline:1px solid windowText; } }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusSuccess_pc5rl{ --p-banner-background:var(--p-surface-success-subdued); --p-banner-border:var(--p-banner-border-success); transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); transition-delay:100ms; border-radius:var(--p-border-radius-wide, 0 0 3px 3px); box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #50b83c), inset 0 0 0 0 transparent, 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); position:relative; background-color:var(--p-banner-background, #eff7ed); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusSuccess_pc5rl{ outline:1px solid; } }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusSuccess_pc5rl::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-wide) + 0.1rem); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusSuccess_pc5rl:focus{ outline:none; }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusSuccess_pc5rl.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #50b83c), inset 0 0 0 3px var(--p-override-none, #50b83c), 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusSuccess_pc5rl.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusSuccess_pc5rl.Polaris-Banner--keyFocused_1aqee::after{ outline:1px solid windowText; } }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusInfo_knr66{ --p-banner-background:var(--p-surface-highlight-subdued); --p-banner-border:var(--p-banner-border-highlight); transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); transition-delay:100ms; border-radius:var(--p-border-radius-wide, 0 0 3px 3px); box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #47c1bf), inset 0 0 0 0 transparent, 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); position:relative; background-color:var(--p-banner-background, #eef9f9); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusInfo_knr66{ outline:1px solid; } }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusInfo_knr66::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-wide) + 0.1rem); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusInfo_knr66:focus{ outline:none; }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusInfo_knr66.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #47c1bf), inset 0 0 0 3px var(--p-override-none, #47c1bf), 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusInfo_knr66.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusInfo_knr66.Polaris-Banner--keyFocused_1aqee::after{ outline:1px solid windowText; } }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusWarning_1x66d{ --p-banner-background:var(--p-surface-warning-subdued); --p-banner-border:var(--p-banner-border-warning); transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); transition-delay:100ms; border-radius:var(--p-border-radius-wide, 0 0 3px 3px); box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #eec200), inset 0 0 0 0 transparent, 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); position:relative; background-color:var(--p-banner-background, #fdf7e3); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusWarning_1x66d{ outline:1px solid; } }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusWarning_1x66d::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-wide) + 0.1rem); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusWarning_1x66d:focus{ outline:none; }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusWarning_1x66d.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #eec200), inset 0 0 0 3px var(--p-override-none, #eec200), 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusWarning_1x66d.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusWarning_1x66d.Polaris-Banner--keyFocused_1aqee::after{ outline:1px solid windowText; } }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusCritical_1iy3d{ --p-banner-background:var(--p-surface-critical-subdued); --p-banner-border:var(--p-banner-border-critical); transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); transition-delay:100ms; border-radius:var(--p-border-radius-wide, 0 0 3px 3px); box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #de3618), inset 0 0 0 0 transparent, 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); position:relative; background-color:var(--p-banner-background, #fdf3f0); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusCritical_1iy3d{ outline:1px solid; } }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusCritical_1iy3d::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.1rem; right:-0.1rem; bottom:-0.1rem; left:-0.1rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.1rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-wide) + 0.1rem); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusCritical_1iy3d:focus{ outline:none; }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusCritical_1iy3d.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border, inset 0 3px 0 0 var(--p-override-none, #de3618), inset 0 0 0 3px var(--p-override-none, #de3618), 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusCritical_1iy3d.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusCritical_1iy3d.Polaris-Banner--keyFocused_1aqee::after{ outline:1px solid windowText; } }

.Polaris-Banner--withinPage_kguwn + .Polaris-Banner_z4w8k{ margin-top:2rem; }

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__Ribbon_r8z8p{ padding-right:1.6rem; }

.Polaris-Banner--newDesignLanguage_1rik8 .Polaris-Banner--withinPage_kguwn .Polaris-Banner__Ribbon_r8z8p{ padding-right:2rem; }

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__Actions_17m67{ padding-top:1.6rem; }

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__Dismiss_z8d6a{ right:1.6rem; top:2rem; position:absolute; }

.Polaris-Banner--hasDismiss_kf0ua{ padding-right:5.6rem; }

.Polaris-Banner--hasDismiss_kf0ua.Polaris-Banner--newDesignLanguage_1rik8{ padding-right:calc(3.2rem + var(--p-icon-size)); }

.Polaris-Banner__Heading_1brcv{ padding-top:var(--p-override-none, 0.2rem); word-break:break-word; }

.Polaris-Banner__Content_xd1mk{ word-wrap:break-word; word-break:break-word; overflow-wrap:break-word; padding:0.4rem 0; }

.Polaris-Banner--newDesignLanguage_1rik8 .Polaris-Banner__Content_xd1mk{ padding:0.2rem 0; }

.Polaris-Banner__Ribbon_r8z8p{ flex:0 0 3.2rem; }

.Polaris-Banner__PrimaryAction_eeemy{ margin-right:0.6rem; }

.Polaris-Banner__SecondaryAction_1dl4i{ -webkit-appearance:none; -moz-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; cursor:pointer; color:inherit; text-decoration:none; display:inline-block; text-align:left; margin:-0.8rem -0.6rem; padding:0.8rem 1.2rem; color:var(--p-text, #212b36); padding-left:0.6rem; }

.Polaris-Banner__SecondaryAction_1dl4i:focus{ outline:none; }

.Polaris-Banner__SecondaryAction_1dl4i:visited{ color:inherit; }

.Polaris-Banner__SecondaryAction_1dl4i:hover > .Polaris-Banner__Text_yj3uv{ box-shadow:0 -2px 0 0 rgba(var(--p-rgb-text), 0.75) inset; }

.Polaris-Banner__SecondaryAction_1dl4i:active > .Polaris-Banner__Text_yj3uv{ box-shadow:0 -2px 0 0 rgba(var(--p-rgb-text), 0) inset; }

.Polaris-Banner__SecondaryAction_1dl4i:focus > .Polaris-Banner__Text_yj3uv{ padding:2px 5px; margin:-2px -5px; background:rgba(33, 43, 54, 0.1); border-radius:3px; transition:opacity 200ms cubic-bezier(0.64, 0, 0.35, 1); box-shadow:none; }

@media (-ms-high-contrast: active){ .Polaris-Banner__SecondaryAction_1dl4i:focus > .Polaris-Banner__Text_yj3uv{ outline:2px dotted; } }

.Polaris-Banner__Text_yj3uv{ box-shadow:0 -2px 0 0 rgba(var(--p-rgb-text), 0.25) inset; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:box-shadow; transition:box-shadow 200ms cubic-bezier(0.64, 0, 0.35, 1); }

.Polaris-Banner__Button_r99lw{ position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:3.6rem; min-width:3.6rem; margin:0; padding:0.7rem 1.6rem; background:linear-gradient(to bottom, white, #f9fafb); border:0.1rem solid var(--p-border, #c4cdd5); box-shadow:0 1px 0 0 rgba(22, 29, 37, 0.05); border-radius:3px; line-height:1; color:#212b36; text-align:center; cursor:pointer; -webkit-user-select:none; user-select:none; text-decoration:none; transition-property:background, border, box-shadow; transition-duration:var(--p-override-none, 200ms); transition-timing-function:var(--p-override-none, cubic-bezier(0.64, 0, 0.35, 1)); -webkit-tap-highlight-color:transparent; font-size:1.5rem; font-weight:var(--p-button-font-weight, 400); line-height:1.6rem; text-transform:initial; letter-spacing:initial; position:relative; color:var(--p-text); }

.Polaris-Banner__Button_r99lw svg{ fill:#637381; }

.Polaris-Banner__Button_r99lw:hover{ background:linear-gradient(to bottom, #f9fafb, #f4f6f8); border-color:#c4cdd5; }

.Polaris-Banner__Button_r99lw:focus{ border-color:#5c6ac4; outline:0; box-shadow:0 0 0 1px #5c6ac4; }

@media (-ms-high-contrast: active){ .Polaris-Banner__Button_r99lw:focus{ outline:2px dotted; } }

.Polaris-Banner__Button_r99lw:active{ background:linear-gradient(to bottom, #f4f6f8, #f4f6f8); border-color:#c4cdd5; box-shadow:0 0 0 0 transparent, inset 0 1px 1px 0 rgba(99, 115, 129, 0.1), inset 0 1px 4px 0 rgba(99, 115, 129, 0.2); }

.Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8{ position:relative; background:var(--p-surface); box-shadow:var(--p-button-drop-shadow); border-radius:var(--p-border-radius-base); color:var(--p-text); border:1px solid var(--p-border-neutral-subdued); border-top-color:var(--p-border-subdued); border-bottom-color:var(--p-border-shadow-subdued); }

.Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8 svg{ fill:var(--p-icon); }

.Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.2rem; right:-0.2rem; bottom:-0.2rem; left:-0.2rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.2rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8:hover{ background:var(--p-action-secondary-hovered); }

@media (-ms-high-contrast: active){ .Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8:hover{ outline:1px solid windowText; } }

.Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8:focus{ box-shadow:var(--p-button-drop-shadow); border-color:var(--p-border-neutral-subdued); }

.Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8:focus::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8:focus::after{ outline:1px solid windowText; } }

.Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8:active{ background:var(--p-action-secondary-pressed); box-shadow:var(--p-button-drop-shadow); }

.Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8:active::after{ border:none; box-shadow:none; }

.Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--pressed_17w8v{ background:var(--p-action-secondary-depressed); box-shadow:var(--p-button-pressed-inner-shadow); color:var(--p-text-on-primary); border-color:var(--p-border-depressed); }

.Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--pressed_17w8v svg{ fill:currentColor; }

@media (-ms-high-contrast: active){ .Polaris-Banner__Button_r99lw.Polaris-Banner--newDesignLanguage_1rik8{ border:1px solid windowText; } }

@media (min-width: 40em){ .Polaris-Banner__Button_r99lw{ font-size:1.4rem; } }

.Polaris-Banner__Button_r99lw::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.3rem; right:-0.3rem; bottom:-0.3rem; left:-0.3rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.3rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-Banner__Button_r99lw:focus::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Banner__Button_r99lw:focus::after{ outline:1px solid windowText; } }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusCritical_1iy3d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw{ border-color:var(--p-border-critical-subdued); background:var(--p-surface-critical-subdued); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusCritical_1iy3d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:hover{ border-color:var(--p-border-critical-subdued); background:var(--p-surface-critical-subdued-hovered); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusCritical_1iy3d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:active{ border-color:var(--p-border-critical-subdued); background:var(--p-surface-critical-subdued-pressed); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusCritical_1iy3d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:focus:not(:active){ border-color:var(--p-border-critical-subdued); background:var(--p-surface-critical-subdued); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusWarning_1x66d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw{ border-color:var(--p-border-warning-subdued); background:var(--p-surface-warning-subdued); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusWarning_1x66d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:hover{ border-color:var(--p-border-warning-subdued); background:var(--p-surface-warning-subdued-hovered); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusWarning_1x66d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:active{ border-color:var(--p-border-warning-subdued); background:var(--p-surface-warning-subdued-pressed); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusWarning_1x66d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:focus:not(:active){ border-color:var(--p-border-warning-subdued); background:var(--p-surface-warning-subdued); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusInfo_knr66 .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw{ border-color:var(--p-border-highlight-subdued); background:var(--p-surface-highlight-subdued); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusInfo_knr66 .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:hover{ border-color:var(--p-border-highlight-subdued); background:var(--p-surface-highlight-subdued-hovered); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusInfo_knr66 .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:active{ border-color:var(--p-border-highlight-subdued); background:var(--p-surface-highlight-subdued-pressed); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusInfo_knr66 .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:focus:not(:active){ border-color:var(--p-border-highlight-subdued); background:var(--p-surface-highlight-subdued); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusSuccess_pc5rl .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw{ border-color:var(--p-border-success-subdued); background:var(--p-surface-success-subdued); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusSuccess_pc5rl .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:hover{ border-color:var(--p-border-success-subdued); background:var(--p-surface-success-subdued-hovered); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusSuccess_pc5rl .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:active{ border-color:var(--p-border-success-subdued); background:var(--p-surface-success-subdued-pressed); }

.Polaris-Banner--newDesignLanguage_1rik8.Polaris-Banner--statusSuccess_pc5rl .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:focus:not(:active){ border-color:var(--p-border-success-subdued); background:var(--p-surface-success-subdued); }