@cbpds/web-components/dist/collection/components/cbp-accordion-item/cbp-accordion-item.css

Web components for the CBP Design System.

/* 
 * 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-color: var(--cbp-color-text-darker);
*  @prop  --cbp-accordion-item-color-background: var(--cbp-color-gray-cool-10);
*  @prop  --cbp-accordion-item-border-width: var(--cbp-border-width-xs);
*  @prop  --cbp-accordion-item-border-style: solid;
*  @prop  --cbp-accordion-item-color-hover: var(--cbp-color-text-darker);
*  @prop  --cbp-accordion-item-color-background-hover: var(--cbp-color-interactive-secondary-light);
*  @prop  --cbp-accordion-item-color-open-hover: var(--cbp-color-text-lightest);
*  @prop  --cbp-accordion-item-color-background-open-hover: var(--cbp-color-interactive-secondary-darker);
*  @prop  --cbp-accordion-item-color-focus: var(--cbp-color-text-lightest);
*  @prop --cbp-accordion-item-color-background-focus: var(--cbp-color-interactive-focus-dark);
*  @prop  --cbp-accordion-item-color-outline-focus: var(--cbp-color-white);
*  @prop  --cbp-accordion-item-color-active: var(--cbp-color-text-lightest);
*  @prop  --cbp-accordion-item-color-background-active: var(--cbp-color-interactive-active-dark);
*  @prop  --cbp-accordion-item-border-radius: var(--cbp-border-radius-sharp, 0);
*  @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-accordion-item-control-gap: var(--cbp-space-3x);
*  @prop  --cbp-accordion-item-control-padding: var(--cbp-space-3x);
*  @prop  --cbp-accordion-item-control-direction: row;
*  @prop  --cbp-accordion-item-color-content: var(--cbp-color-text-darkest);
*  @prop  --cbp-accordion-item-color-background-content: var(--cbp-color-white);
*  @prop  --cbp-accordion-item-content-font-size: var(--cbp-font-size-md);
*  @prop  --cbp-accordion-item-content-font-family: inherit;
*  @prop  --cbp-accordion-item-content-font-weight: var(--cbp-font-weight-regular);
*  @prop  --cbp-accordion-item-content-padding: var(--cbp-space-3x);

*  @prop  --cbp-accordion-item-danger-color: var(--cbp-color-white);
*  @prop  --cbp-accordion-item-danger-color-dark: var(--cbp-color-text-darkest);
*  @prop  --cbp-accordion-item-danger-color-background: var(--cbp-color-danger-base);
*  @prop  --cbp-accordion-item-danger-color-background-dark: var(--cbp-color-danger-light);
*  @prop  --cbp-accordion-item-danger-color-background-hover: var(--cbp-color-danger-dark);
*  @prop  --cbp-accordion-item-danger-color-background-hover-dark: var(--cbp-color-danger-lighter);
*/
:root {
  --cbp-accordion-item-color: var(--cbp-color-text-darker);
  --cbp-accordion-item-color-background: var(--cbp-color-gray-cool-10);
  --cbp-accordion-item-color-open: var(--cbp-color-text-lighter);
  --cbp-accordion-item-color-background-open: var(--cbp-color-gray-cool-60);
  --cbp-accordion-item-color-hover: var(--cbp-color-text-darker);
  --cbp-accordion-item-color-background-hover: var(--cbp-color-interactive-secondary-light);
  --cbp-accordion-item-color-open-hover: var(--cbp-color-text-lightest);
  --cbp-accordion-item-color-background-open-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-accordion-item-color-focus: var(--cbp-color-text-lightest);
  --cbp-accordion-item-color-background-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-accordion-item-color-outline-focus: var(--cbp-color-white);
  --cbp-accordion-item-color-active: var(--cbp-color-text-lightest);
  --cbp-accordion-item-color-background-active: var(--cbp-color-interactive-active-dark);
  --cbp-accordion-item-border-width: var(--cbp-border-width-xs);
  --cbp-accordion-item-border-style: solid;
  --cbp-accordion-item-border-radius: var(--cbp-border-radius-sharp, 0);
  --cbp-accordion-item-control-font-size: var(--cbp-font-size-heading-sm);
  --cbp-accordion-item-control-font-weight: var(--cbp-font-weight-semibold);
  --cbp-accordion-item-control-gap: var(--cbp-space-3x);
  --cbp-accordion-item-control-padding: var(--cbp-space-3x);
  --cbp-accordion-item-control-direction: row;
  --cbp-accordion-item-color-content: var(--cbp-color-text-darkest);
  --cbp-accordion-item-color-background-content: var(--cbp-color-white);
  --cbp-accordion-item-content-font-size: var(--cbp-font-size-md);
  --cbp-accordion-item-content-font-family: inherit;
  --cbp-accordion-item-content-font-weight: var(--cbp-font-weight-regular);
  --cbp-accordion-item-content-padding: var(--cbp-space-3x);
  --cbp-accordion-item-heading-gap: var(--cbp-space-2x);
  --cbp-accordion-item-danger-color: var(--cbp-color-white);
  --cbp-accordion-item-danger-color-dark: var(--cbp-color-text-darkest);
  --cbp-accordion-item-danger-color-background: var(--cbp-color-danger-base);
  --cbp-accordion-item-danger-color-background-dark: var(--cbp-color-danger-light);
  --cbp-accordion-item-danger-color-background-hover: var(--cbp-color-danger-dark);
  --cbp-accordion-item-danger-color-background-hover-dark: var(--cbp-color-danger-lighter);
}

[data-cbp-theme=light] cbp-accordion[context*=dark],
[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-accordion-item-color: var(--cbp-color-white);
  --cbp-accordion-item-color-background: var(--cbp-color-gray-cool-50);
  --cbp-accordion-item-color-open: var(--cbp-color-white);
  --cbp-accordion-item-color-background-open: var(--cbp-color-gray-cool-60);
  --cbp-accordion-item-color-hover: var(--cbp-color-text-darkest);
  --cbp-accordion-item-color-background-hover: var(--cbp-color-interactive-secondary-lighter);
  --cbp-accordion-item-color-open-hover: var(--cbp-color-text-darkest);
  --cbp-accordion-item-color-background-open-hover: var(--cbp-color-interactive-secondary-light);
  --cbp-accordion-item-color-focus: var(--cbp-color-text-darkest);
  --cbp-accordion-item-color-background-focus: var(--cbp-color-interactive-focus-light);
  --cbp-accordion-item-color-outline-focus: var(--cbp-color-black);
  --cbp-accordion-item-color-active: var(--cbp-color-text-darkest);
  --cbp-accordion-item-color-background-active: var(--cbp-color-interactive-active-light);
  --cbp-accordion-item-color-content: var(--cbp-color-text-lightest);
  --cbp-accordion-item-color-background-content: var(--cbp-color-gray-cool-90);
  --cbp-accordion-item-danger-color: var(--cbp-accordion-item-danger-color-dark);
  --cbp-accordion-item-danger-color-background: var(--cbp-accordion-item-danger-color-background-dark);
  --cbp-accordion-item-danger-color-background-hover: var(--cbp-accordion-item-danger-color-background-hover-dark);
}

cbp-accordion-item {
  display: flex;
  flex-direction: column;
}
cbp-accordion-item[open] {
  --cbp-accordion-item-color: var(--cbp-accordion-item-color-open);
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-color-background-open);
}
cbp-accordion-item[open] .cbp-accordion-item--control {
  --cbp-accordion-rotate-icon: rotate(270deg);
  --cbp-accordion-toggle: expandTo 500ms;
}
cbp-accordion-item[open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active) {
  --cbp-accordion-item-color: var(--cbp-accordion-item-color-open-hover);
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-color-background-open-hover);
}
cbp-accordion-item[open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active) + .cbp-accordion-item--content {
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-color-background-open-hover);
}
cbp-accordion-item .cbp-accordion-item--control {
  display: flex;
  flex-direction: var(--cbp-accordion-item-control-direction, row);
  align-items: center;
  gap: var(--cbp-accordion-item-control-gap);
  min-height: var(--cbp-space-13x);
  color: var(--cbp-accordion-item-color);
  --cbp-button-color: var(--cbp-accordion-item-color);
  background-color: var(--cbp-accordion-item-color-background);
  font-size: var(--cbp-accordion-item-control-font-size);
  font-weight: var(--cbp-accordion-item-control-font-weight);
  padding: var(--cbp-accordion-item-control-padding);
  outline-style: solid;
  outline-color: var(--cbp-accordion-item-color-outline-focus);
  outline-width: 0;
  outline-offset: calc(-1 * var(--cbp-space-1x));
  cursor: pointer;
}
cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--heading {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}
cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--heading :first-child {
  flex-grow: 1;
}
cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--heading [slot=cbp-accordion-item-label] {
  display: flex;
  align-items: center;
  gap: var(--cbp-accordion-item-heading-gap);
}
cbp-accordion-item .cbp-accordion-item--control cbp-typography,
cbp-accordion-item .cbp-accordion-item--control cbp-typography > * {
  color: var(--cbp-accordion-item-color);
}
cbp-accordion-item .cbp-accordion-item--control:hover {
  --cbp-accordion-item-color: var(--cbp-accordion-item-color-hover);
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-color-background-hover);
}
cbp-accordion-item .cbp-accordion-item--control:focus-within {
  --cbp-accordion-item-color: var(--cbp-accordion-item-color-focus);
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-color-background-focus);
  outline-width: var(--cbp-border-size-md);
}
cbp-accordion-item .cbp-accordion-item--control:focus-within .cbp-accordion-item--toggle {
  --cbp-button-color: var(--cbp-accordion-item-color-focus) !important;
}
cbp-accordion-item .cbp-accordion-item--control:focus-within + .cbp-accordion-item--content {
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-color-background-focus);
}
cbp-accordion-item .cbp-accordion-item--control:active {
  --cbp-accordion-item-color: var(--cbp-accordion-item-color-active);
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-color-background-active);
}
cbp-accordion-item .cbp-accordion-item--control:active .cbp-accordion-item--toggle {
  --cbp-button-color: var(--cbp-accordion-item-color-active) !important;
}
cbp-accordion-item .cbp-accordion-item--control:active + .cbp-accordion-item--content {
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-color-background-active);
}
cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--toggle {
  --cbp-button-padding: 0;
  --cbp-button-border-width: 0;
  --cbp-button-focus-outline-width: 0;
  --cbp-button-color: var(--cbp-accordion-item-color) !important;
  --cbp-button-color-hover: var(--cbp-accordion-item-color) !important;
  --cbp-button-color-focus: var(--cbp-accordion-item-color) !important;
  --cbp-button-color-active: var(--cbp-accordion-item-color) !important;
  --cbp-button-color-bg: transparent !important;
  --cbp-button-color-bg-hover: transparent !important;
  --cbp-button-color-bg-focus: transparent !important;
  --cbp-button-color-bg-active: transparent !important;
}
cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--toggle cbp-icon svg {
  transition: transform 150ms;
  transform: var(--cbp-accordion-rotate-icon);
}
cbp-accordion-item .cbp-accordion-item--content {
  color: var(--cbp-accordion-item-color-content);
  background-color: var(--cbp-accordion-item-color-background-content);
  padding: var(--cbp-space-4x) var(--cbp-space-3x);
  border-width: var(--cbp-border-size-xl);
  border-style: var(--cbp-accordion-item-border-style);
  border-color: var(--cbp-accordion-item-color-background);
  border-top: 0;
  animation: var(--cbp-accordion-toggle);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 10);
  animation-iteration-count: revert;
  animation-fill-mode: forwards;
}
cbp-accordion-item:not([open]) {
  --cbp-accordion-rotate-icon: rotate(90deg);
}
cbp-accordion-item:not([open]) .cbp-accordion-item--content {
  display: none;
}
cbp-accordion-item[color=danger], cbp-accordion-item[color=danger][open] {
  --cbp-accordion-item-color: var(--cbp-accordion-item-danger-color);
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-danger-color-background);
}
cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active), cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active) {
  --cbp-accordion-item-color: var(--cbp-accordion-item-danger-color);
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-danger-color-background-hover);
}
cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active) + .cbp-accordion-item--content, cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active) + .cbp-accordion-item--content {
  --cbp-accordion-item-color-background: var(--cbp-accordion-item-danger-color-background-hover);
}
cbp-accordion-item[color=danger] .cbp-accordion-item--control cbp-typography,
cbp-accordion-item[color=danger] .cbp-accordion-item--control cbp-typography > *, cbp-accordion-item[color=danger][open] .cbp-accordion-item--control cbp-typography,
cbp-accordion-item[color=danger][open] .cbp-accordion-item--control cbp-typography > * {
  --cbp-accordion-item-color: var(--cbp-accordion-item-danger-color);
}

@keyframes expandTo {
  from {
    max-height: 0px;
  }
  to {
    max-height: 5000px;
  }
}