@primer/react/dist/Banner/Banner-f672cdf9.css

An implementation of GitHub's Primer Design System using React

.prc-Banner-Banner-IPLJ2{align-items:start;background-color:var(--banner-bgColor);border:var(--borderWidth-thin,.0625rem) solid var(--banner-borderColor);border-radius:var(--borderRadius-medium,.375rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding:var(--base-size-8,.5rem)}@supports (container-type:inline-size){.prc-Banner-Banner-IPLJ2[data-actions-layout=default]{container:banner/inline-size}}.prc-Banner-Banner-IPLJ2[data-actions-layout=stacked] .prc-Banner-BannerContainer-T-Siu{flex-direction:column}.prc-Banner-Banner-IPLJ2[data-actions-layout=stacked] .prc-Banner-BannerActions-gvCLf :where([data-primary-action=trailing]){display:none}.prc-Banner-Banner-IPLJ2[data-actions-layout=stacked] .prc-Banner-BannerActions-gvCLf :where([data-primary-action=leading]){display:flex}.prc-Banner-Banner-IPLJ2[data-actions-layout=inline] .prc-Banner-BannerContainer-T-Siu{flex-wrap:nowrap}.prc-Banner-Banner-IPLJ2[data-actions-layout=inline] .prc-Banner-BannerActions-gvCLf{flex:0 0 auto}.prc-Banner-Banner-IPLJ2[data-actions-layout=inline] .prc-Banner-BannerActions-gvCLf :where([data-primary-action=trailing]){display:flex}.prc-Banner-Banner-IPLJ2[data-actions-layout=inline] .prc-Banner-BannerActions-gvCLf :where([data-primary-action=leading]){display:none}.prc-Banner-Banner-IPLJ2[data-layout=compact]{padding:var(--base-size-4,.25rem)}.prc-Banner-Banner-IPLJ2[data-flush]{border-left:none;border-radius:0;border-right:none}.prc-Banner-Banner-IPLJ2[data-variant=critical]{--banner-bgColor:var(--bgColor-danger-muted,var(--color-danger-subtle));--banner-borderColor:var(--borderColor-danger-muted,var(--color-danger-muted));--banner-icon-fgColor:var(--fgColor-danger,var(--color-danger-fg))}.prc-Banner-Banner-IPLJ2[data-variant=info]{--banner-bgColor:var(--bgColor-accent-muted,var(--color-accent-subtle));--banner-borderColor:var(--borderColor-accent-muted,var(--color-accent-muted));--banner-icon-fgColor:var(--fgColor-accent,var(--color-accent-fg))}.prc-Banner-Banner-IPLJ2[data-variant=success]{--banner-bgColor:var(--bgColor-success-muted,var(--color-success-subtle));--banner-borderColor:var(--borderColor-success-muted,var(--color-success-muted));--banner-icon-fgColor:var(--fgColor-success,var(--color-success-fg))}.prc-Banner-Banner-IPLJ2[data-variant=upsell]{--banner-bgColor:var(--bgColor-upsell-muted,#fbefff);--banner-borderColor:var(--borderColor-upsell-muted,#c297ff66);--banner-icon-fgColor:var(--fgColor-upsell,#8250df)}.prc-Banner-Banner-IPLJ2[data-variant=warning]{--banner-bgColor:var(--bgColor-attention-muted,var(--color-attention-subtle));--banner-borderColor:var(--borderColor-attention-muted,var(--color-attention-muted));--banner-icon-fgColor:var(--fgColor-attention,var(--color-attention-fg))}.prc-Banner-BannerContainer-T-Siu{align-items:start;column-gap:var(--base-size-4,.25rem);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.42857);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IPLJ2 :where(.prc-Banner-BannerContainer-T-Siu){display:flex;flex-wrap:wrap;justify-content:space-between}.prc-Banner-Banner-IPLJ2[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerContainer-T-Siu{display:grid;grid-template-columns:auto;grid-template-rows:auto}.prc-Banner-BannerContent-LraS2{display:grid;grid-column-start:1;margin-block:var(--base-size-8,.5rem);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IPLJ2[data-title-hidden]:not(:has(.prc-Banner-BannerActions-gvCLf)) .prc-Banner-BannerContent-LraS2{margin-block:var(--base-size-6,.375rem)}@media screen and (min-width:544px){.prc-Banner-BannerContent-LraS2{flex:1 1 0%}}.prc-Banner-BannerTitle-T4z0L{font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin:0}.prc-Banner-BannerIcon-o4ayx{display:grid;padding:var(--base-size-8,.5rem);place-items:center}.prc-Banner-BannerIcon-o4ayx svg{color:var(--banner-icon-fgColor);height:var(--base-size-20,1.25rem);fill:var(--banner-icon-fgColor)}.prc-Banner-Banner-IPLJ2[data-title-hidden]:not(:has(.prc-Banner-BannerActions-gvCLf)) .prc-Banner-BannerIcon-o4ayx svg{height:var(--base-size-16,1rem)}.prc-Banner-BannerDismiss-b12FL{display:grid;margin-inline-start:var(--base-size-4,.25rem);padding:var(--base-size-8,.5rem);place-items:center}:where(.prc-Banner-Banner-IPLJ2):has(.prc-Banner-BannerActions-gvCLf) .prc-Banner-BannerDismiss-b12FL{margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerDismiss-b12FL svg{color:var(--banner-icon-fgColor)}.prc-Banner-BannerActionsContainer-PdBu1{align-items:center;column-gap:var(--base-size-12,.75rem);display:flex;margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerActions-gvCLf :where([data-primary-action=trailing]){display:none}.prc-Banner-Banner-IPLJ2[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerActions-gvCLf{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-Banner-IPLJ2[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerActionsContainer-PdBu1[data-primary-action=trailing]{display:none}.prc-Banner-Banner-IPLJ2[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerActionsContainer-PdBu1[data-primary-action=leading]{display:flex}@container banner (max-width: 500px){.prc-Banner-BannerContainer-T-Siu{display:grid}.prc-Banner-BannerContainer-T-Siu:has(.prc-Banner-BannerActionsContainer-PdBu1){grid-template-rows:auto auto}.prc-Banner-BannerActions-gvCLf{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-BannerActions-gvCLf [data-primary-action=trailing]{display:none}.prc-Banner-BannerActions-gvCLf [data-primary-action=leading]{display:flex}}@container banner (min-width: 500px){.prc-Banner-BannerContainer-T-Siu{display:grid;grid-template-columns:auto auto}:where(.prc-Banner-Banner-IPLJ2):not([data-dismissible]) :where(.prc-Banner-BannerActionsContainer-PdBu1[data-primary-action=trailing]) :where([data-variant=link]:only-child){padding-inline:0 var(--base-size-12,.75rem)}.prc-Banner-BannerActions-gvCLf [data-primary-action=trailing]{display:flex;min-height:var(--base-size-32,2rem)}.prc-Banner-BannerActions-gvCLf [data-primary-action=leading]{display:none}}
/*# sourceMappingURL=Banner-f672cdf9.css.map */