:host {
  display: block;
  position: relative;
  width: 100%;
  background-color: var(--gasco-background-color, #ffffff);
  box-shadow: 0px 0px 4px rgba(171, 190, 209, 0.6);
  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 gasco-item or expanding/collapsing
   * the accordion.
   */
  z-index: 0;
}

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

: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);
}

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

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

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

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

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

/**
 * 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;
  }
}