/* 
 * 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-accordion-item-control-font-size: var(--cbp-font-size-heading-sm);
*  @prop  --cbp-accordion-item-control-font-weight: var(--cbp-font-weight-semibold);
*  @prop  --cbp-expand-control-gap: var(--cbp-space-1x);
*  @prop  --cbp-expand-control-padding: var(--cbp-space-3x);
*  @prop  --cbp-expand-content-padding: var(--cbp-space-3x);
*  @prop  --cbp-expand-margin-bottom: var(--cbp-space-2x);

*  @prop  --cbp-expand-color: var(--cbp-color-text-darkest);
*  @prop  --cbp-expand-color-dark: var(--cbp-color-text-lightest);
*  @prop  --cbp-expand-button-color-text: var(--cbp-color-text-lightest);
*  @prop  --cbp-expand-button-color-text-dark: var(--cbp-color-text-darkest);
*  @prop  --cbp-expand-button-color-fill: var(--cbp-color-interactive-secondary-darker);
*  @prop  --cbp-expand-button-color-fill-dark: var(--cbp-color-interactive-secondary-lighter);
*  @prop  --cbp-expand-button-color-text-hover: var(--cbp-color-text-lightest);
*  @prop  --cbp-expand-button-color-text-hover-dark: var(--cbp-color-text-darkest);
*  @prop  --cbp-expand-button-color-fill-hover: var(--cbp-color-interactive-secondary-darker);
*  @prop  --cbp-expand-button-color-fill-hover-dark: var(--cbp-color-interactive-secondary-lighter);
*/
:root {
  --cbp-accordion-item-control-font-size: var(--cbp-font-size-heading-sm);
  --cbp-accordion-item-control-font-weight: var(--cbp-font-weight-semibold);
  --cbp-expand-control-gap: var(--cbp-space-1x);
  --cbp-expand-control-padding: var(--cbp-space-3x);
  --cbp-expand-content-padding: var(--cbp-space-3x);
  --cbp-expand-margin-bottom: var(--cbp-space-2x);
  --cbp-expand-color: var(--cbp-color-text-darkest);
  --cbp-expand-color-dark: var(--cbp-color-text-lightest);
  --cbp-expand-button-color-text: var(--cbp-color-text-lightest);
  --cbp-expand-button-color-text-dark: var(--cbp-color-text-darkest);
  --cbp-expand-button-color-fill: var(--cbp-color-interactive-secondary-darker);
  --cbp-expand-button-color-fill-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-expand-button-color-text-hover: var(--cbp-color-text-lightest);
  --cbp-expand-button-color-text-hover-dark: var(--cbp-color-text-darkest);
  --cbp-expand-button-color-fill-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-expand-button-color-fill-hover-dark: var(--cbp-color-interactive-secondary-lighter);
}

[data-cbp-theme=light] cbp-expand[context*=dark],
[data-cbp-theme=dark] cbp-expand:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-expand-color: var(--cbp-expand-color-dark);
}

cbp-expand {
  display: block;
  margin-bottom: var(--cbp-expand-margin-bottom);
  color: var(--cbp-expand-color);
}
cbp-expand[open] {
  --cbp-expand-rotate-icon: rotate(-180deg);
}
cbp-expand:not([open]) .cbp-expand--content {
  display: none;
}
cbp-expand[open] .cbp-expand--control {
  --cbp-accordion-rotate-icon: rotate(90deg);
  --cbp-accordion-toggle: expandTo 500ms;
}
cbp-expand .cbp-expand--control {
  font-size: var(--cbp-expand-control-font-size);
  cursor: pointer;
}
cbp-expand .cbp-expand--control .cbp-expand--toggle {
  --cbp-button-padding: 0;
  --cbp-button-border-width: 0;
}
cbp-expand .cbp-expand--control .cbp-expand--toggle cbp-icon svg {
  transition: transform 150ms;
  transform: var(--cbp-expand-rotate-icon);
}
cbp-expand .cbp-expand--control:hover .cbp-expand--toggle {
  --cbp-button-color: var(--cbp-expand-button-color-text);
  --cbp-button-color-dark: var(--cbp-expand-button-color-text-dark);
  --cbp-button-color-bg: var(--cbp-expand-button-color-fill);
  --cbp-button-color-bg-dark: var(--cbp-expand-button-color-fill-dark);
  --cbp-button-color-hover: var(--cbp-expand-button-color-text-hover);
  --cbp-button-color-hover-dark: var(--cbp-expand-button-color-text-hover-dark);
  --cbp-button-color-bg-hover: var(--cbp-expand-button-color-fill-hover);
  --cbp-button-color-bg-hover-dark: var(--cbp-expand-button-color-fill-hover-dark);
}
cbp-expand .cbp-expand--content {
  padding-left: var(--cbp-space-7x);
}