/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
@prop --cbp-banner-color: var(--cbp-color-text-lightest);
@prop --cbp-banner-color-bg: var(--cbp-color-info-dark);
*/
:root {
  --cbp-banner-color: var(--cbp-color-text-lightest);
  --cbp-banner-color-bg: var(--cbp-color-info-dark);
}

cbp-banner {
  display: flex;
  flex-direction: row;
  gap: var(--cbp-space-4x);
  padding: var(--cbp-space-4x) var(--cbp-responsive-spacing-outer);
  background-color: var(--cbp-banner-color-bg);
}
cbp-banner .cbp-banner-icon-container {
  align-content: center;
}
cbp-banner .cbp-banner-text-container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  color: var(--cbp-banner-color);
}
cbp-banner .cbp-banner-text-container > p {
  margin-block-end: var(--cbp-space-3x);
}
cbp-banner[color=info] {
  --cbp-banner-color-bg: var(--cbp-color-info-dark);
  --cbp-banner-color: var(--cbp-color-text-lightest);
}