:host {
  display: block;
  position: relative;
  width: 100%;
  background-color: var(--bkkr-background-color, #fff);
  overflow: hidden;
  /**
   * This is required to force WebKit
   * to create a new stacking context
   * otherwise the border radius is
   * temporarily lost when hovering over
   * the bkkr-item or expanding/collapsing
   * the accordion.
   */
  z-index: 0;
}

:host(.accordion-animated) {
  transition: all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
}

:host(.accordion-animated) #content {
  transition: max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
}

:host ::slotted(bkkr-item[slot=header]) {
  --padding-start: var(--bkkr-spacer, 16px);
}

#content {
  overflow: hidden;
  will-change: max-height;
}

:host(.accordion-expanding) ::slotted(bkkr-item[slot=header]),
:host(.accordion-expanded) ::slotted(bkkr-item[slot=header]) {
  --border-width: 0;
}

:host(.accordion-collapsing) #content {
  /* stylelint-disable-next-line declaration-no-important */
  max-height: 0 !important;
}

:host(.accordion-collapsed) #content {
  display: none;
}

:host(.accordion-expanding) #content {
  max-height: 0;
}

:host(.accordion-disabled) #header {
  pointer-events: none;
}

:host(.accordion-next) ::slotted(bkkr-item[slot=header]) {
  --border-width: 0.55px 0 0.55px 0px;
}

/**
 * We do not set the opacity on the
 * host otherwise you would see the
 * box-shadow behind it.
 */
:host(.accordion-disabled) #header,
:host(.accordion-disabled) #content {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  :host,
#content {
    /* stylelint-disable declaration-no-important */
    transition: none !important;
  }
}