{"version":3,"sources":["../src/Banner/Banner.module.css.js"],"names":[],"mappings":"AAAA,yBASE,iBAAkB,CALlB,sCAAuC,CAEvC,uEAA+D,CAC/D,gDAAyC,CANzC,YAAa,CAOb,6CAA+C,CAN/C,gCAoGF,CA1FI,uCADF,sDAEI,4BAEJ,CADE,CAIA,wFACE,qBACF,CAEA,6HACE,YACF,CAEA,4HACE,YACF,CAIA,uFACE,gBACF,CAEA,qFACE,aACF,CAEA,4HACE,YACF,CAEA,2HACE,YACF,CAEA,mDACE,uFACE,qBACF,CAEA,4HACE,YACF,CAEA,2HACE,YACF,CACF,CAGF,8CACE,iCACF,CAEA,qCACE,gBAAiB,CAEjB,eAAgB,CADhB,iBAEF,CAEA,gDACE,oDAA6C,CAC7C,8DAAqD,CACrD,mDACF,CAEA,4CACE,oDAA6C,CAC7C,8DAAqD,CACrD,mDACF,CAEA,+CACE,qDAA8C,CAC9C,+DAAsD,CACtD,oDACF,CAEA,8CACE,oDAA6C,CAC7C,8DAAqD,CACrD,mDACF,CAEA,+CACE,uDAAgD,CAChD,iEAAwD,CACxD,sDACF,CAKF,kCAEE,iBAAkB,CAGlB,oCAA8B,CAJ9B,8CAAuC,CAEvC,kDAA+C,CAC/C,iCAEF,CAEA,mEACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,mIACE,YAAa,CACb,0BAA2B,CAC3B,uBACF,CAIA,gCACE,YAAa,CAEb,mBAAoB,CACpB,qCAAgC,CAFhC,iCAGF,CAEA,oGACE,uCACF,CAEA,oCACE,gCACE,WACF,CACF,CAEA,8BAEE,iBAAkB,CAClB,gDAA6C,CAF7C,QAGF,CAIA,6BACE,YAAa,CAEb,gCAA2B,CAD3B,kBAEF,CAEA,iCAIE,gCAAiC,CAFjC,kCAA2B,CAI3B,+BACF,CAGA,qGACE,+BACF,CAIA,gCACE,YAAa,CAGb,6CAAuC,CADvC,gCAA2B,CAD3B,kBAGF,CAEA,mFACE,uCACF,CAEA,oCAEE,gCACF,CAIA,yCAGE,kBAAmB,CADnB,qCAA+B,CAD/B,YAAa,CAGb,uCACF,CAEA,uEACE,YACF,CAEA,iIACE,2CACF,CAGA,wKAEE,YACF,CAGA,uKAEE,YACF,CAIA,qCACE,kCACE,YACF,CAEA,qFACE,4BACF,CAEA,gCACE,2CACF,CAEA,+DACE,YACF,CAEA,8DACE,YACF,CACF,CAEA,qCACE,kCACE,YAAa,CACb,+BACF,CAEA,+KAGE,2CACF,CAEA,+DACE,YAAa,CACb,mCACF,CAEA,8DACE,YACF,CACF","file":"Banner-41040ab7.css","sourcesContent":[".Banner {\n  display: grid;\n  padding: var(--base-size-8);\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--banner-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border: var(--borderWidth-thin) solid var(--banner-borderColor);\n  border-radius: var(--borderRadius-medium);\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: start;\n\n  &[data-actions-layout='default'] {\n    @supports (container-type: inline-size) {\n      container: banner / inline-size;\n    }\n  }\n\n  &[data-actions-layout='stacked'] {\n    & .BannerContainer {\n      flex-direction: column;\n    }\n\n    & .BannerActions :where([data-primary-action='trailing']) {\n      display: none;\n    }\n\n    & .BannerActions :where([data-primary-action='leading']) {\n      display: flex;\n    }\n  }\n\n  &[data-actions-layout='inline'] {\n    & .BannerContainer {\n      flex-wrap: nowrap;\n    }\n\n    & .BannerActions {\n      flex: 0 0 auto;\n    }\n\n    & .BannerActions :where([data-primary-action='trailing']) {\n      display: flex;\n    }\n\n    & .BannerActions :where([data-primary-action='leading']) {\n      display: none;\n    }\n\n    @media screen and (--viewportRange-narrow) {\n      & .BannerContainer {\n        flex-direction: column;\n      }\n\n      & .BannerActions :where([data-primary-action='trailing']) {\n        display: none;\n      }\n\n      & .BannerActions :where([data-primary-action='leading']) {\n        display: flex;\n      }\n    }\n  }\n\n  &[data-layout='compact'] {\n    padding: var(--base-size-4);\n  }\n\n  &[data-flush] {\n    border-left: none;\n    border-right: none;\n    border-radius: 0;\n  }\n\n  &[data-variant='critical'] {\n    --banner-bgColor: var(--bgColor-danger-muted);\n    --banner-borderColor: var(--borderColor-danger-muted);\n    --banner-icon-fgColor: var(--fgColor-danger);\n  }\n\n  &[data-variant='info'] {\n    --banner-bgColor: var(--bgColor-accent-muted);\n    --banner-borderColor: var(--borderColor-accent-muted);\n    --banner-icon-fgColor: var(--fgColor-accent);\n  }\n\n  &[data-variant='success'] {\n    --banner-bgColor: var(--bgColor-success-muted);\n    --banner-borderColor: var(--borderColor-success-muted);\n    --banner-icon-fgColor: var(--fgColor-success);\n  }\n\n  &[data-variant='upsell'] {\n    --banner-bgColor: var(--bgColor-upsell-muted);\n    --banner-borderColor: var(--borderColor-upsell-muted);\n    --banner-icon-fgColor: var(--fgColor-upsell);\n  }\n\n  &[data-variant='warning'] {\n    --banner-bgColor: var(--bgColor-attention-muted);\n    --banner-borderColor: var(--borderColor-attention-muted);\n    --banner-icon-fgColor: var(--fgColor-attention);\n  }\n}\n\n/* BannerContainer -------------------------------------------------------- */\n\n.BannerContainer {\n  font-size: var(--text-body-size-medium);\n  align-items: start;\n  line-height: var(--text-body-lineHeight-medium);\n  row-gap: var(--base-size-4);\n  column-gap: var(--base-size-4);\n}\n\n.Banner :where(.BannerContainer) {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerContainer {\n  display: grid;\n  grid-template-columns: auto;\n  grid-template-rows: auto;\n}\n\n/* BannerContent ---------------------------------------------------------- */\n\n.BannerContent {\n  display: grid;\n  row-gap: var(--base-size-4);\n  grid-column-start: 1;\n  margin-block: var(--base-size-8);\n}\n\n.Banner[data-title-hidden]:not([data-has-actions]) .BannerContent {\n  margin-block: var(--base-size-6);\n}\n\n@media screen and (min-width: 544px) {\n  .BannerContent {\n    flex: 1 1 0%;\n  }\n}\n\n.BannerTitle {\n  margin: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold);\n}\n\n/* BannerIcon ------------------------------------------------------------- */\n\n.BannerIcon {\n  display: grid;\n  place-items: center;\n  padding: var(--base-size-8);\n}\n\n.BannerIcon svg {\n  /* 20px is the line box height of the trailing action buttons */\n  height: var(--base-size-20);\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--banner-icon-fgColor);\n  /* stylelint-disable-next-line primer/colors */\n  fill: var(--banner-icon-fgColor);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-title-hidden]:not([data-has-actions]) .BannerIcon svg {\n  height: var(--base-size-16);\n}\n\n/* BannerDismiss ---------------------------------------------------------- */\n\n.BannerDismiss {\n  display: grid;\n  place-items: center;\n  padding: var(--base-size-8);\n  margin-inline-start: var(--base-size-4);\n}\n\n:where(.Banner)[data-has-actions] .BannerDismiss {\n  margin-block: var(--base-size-2);\n}\n\n.BannerDismiss svg {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--banner-icon-fgColor);\n}\n\n/* BannerActions ---------------------------------------------------------- */\n\n.BannerActionsContainer {\n  display: flex;\n  column-gap: var(--base-size-12);\n  align-items: center;\n  margin-block: var(--base-size-2);\n}\n\n.BannerActions :where([data-primary-action='trailing']) {\n  display: none;\n}\n\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerActions {\n  margin-block-end: var(--base-size-6);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline'])\n  .BannerActionsContainer[data-primary-action='trailing'] {\n  display: none;\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline'])\n  .BannerActionsContainer[data-primary-action='leading'] {\n  display: flex;\n}\n\n/* Layout ------------------------------------------------------------------- */\n\n@container banner (max-width: 500px) {\n  .BannerContainer {\n    display: grid;\n  }\n\n  :where(.Banner)[data-has-actions] .BannerContainer {\n    grid-template-rows: auto auto;\n  }\n\n  .BannerActions {\n    margin-block-end: var(--base-size-6);\n  }\n\n  .BannerActions [data-primary-action='trailing'] {\n    display: none;\n  }\n\n  .BannerActions [data-primary-action='leading'] {\n    display: flex;\n  }\n}\n\n@container banner (min-width: 500px) {\n  .BannerContainer {\n    display: grid;\n    grid-template-columns: auto auto;\n  }\n\n  :where(.Banner):not([data-dismissible])\n    :where(.BannerActionsContainer[data-primary-action='trailing'])\n    :where([data-variant='link']:only-child) {\n    padding-inline: 0 var(--base-size-12);\n  }\n\n  .BannerActions [data-primary-action='trailing'] {\n    display: flex;\n    min-height: var(--base-size-32, 2rem);\n  }\n\n  .BannerActions [data-primary-action='leading'] {\n    display: none;\n  }\n}\n"]}