/* 
 * 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
 */
cbp-app {
  display: block;
  position: relative;
  width: 100%;
  min-height: 100vh;
  color: var(--cbp-color-body-text);
  background-color: var(--cbp-color-body-background);
}
cbp-app[data-cbp-theme=dark] {
  --cbp-color-body-text: var(--cbp-color-text-lightest);
  --cbp-color-body-background: var(--cbp-color-branding-cbp-dark);
}
cbp-app:has(cbp-action-bar[variant=floating]) {
  padding-block-end: var(--cbp-space-14x);
}