/* 
 * 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-section-color-border: transparent;
* @prop --cbp-section-color-border-dark: transparent;
* @prop --cbp-section-border-width: 0;
* @prop --cbp-section-border-style: solid;
*/
:root {
  --cbp-section-color-border: transparent;
  --cbp-section-color-border-dark: transparent;
  --cbp-section-border-width: 0;
  --cbp-section-border-style: solid;
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-section[context*=dark],
[data-cbp-theme=dark] cbp-section:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-section-color-border: var(--cbp-section-color-border-dark) !important;
}

cbp-section:not([hidden]) {
  display: block;
  border-width: var(--cbp-section-border-width);
  border-style: var(--cbp-section-border-style);
  border-color: var(--cbp-section-color-border);
}