:host {
  /* Not using 0s here because we rely on the transition end event. */
  --ld-accordion-panel-transition-duration: var(
    --ld-transition-duration-instant
  );

  position: relative;
  display: block;
  box-sizing: border-box;
  max-height: var(--ld-accordion-panel-max-height, auto);
  overflow: hidden;
  background-color: var(--ld-accordion-bg-col);
  border-radius: var(--ld-accordion-border-radius);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  will-change: max-height;

  &(.ld-accordion-panel--initialized) {
    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
    transition: max-height var(--ld-accordion-panel-transition-duration) ease;

    @media (prefers-reduced-motion: no-preference) {
      --ld-accordion-panel-transition-duration: var(
        --ld-transition-duration-normal
      );
    }
  }

  &(.ld-accordion-panel--expanded) {
    &::before {
      content: '';
      height: var(--ld-sp-2);
      background-color: var(--ld-accordion-panel-border-top-col);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    .ld-accordion-panel__content {
      opacity: 1;
      visibility: inherit;
      transition: opacity var(--ld-accordion-panel-transition-duration) linear;
    }
  }
}

.ld-accordion-panel__content {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ld-accordion-panel-transition-duration) linear,
    visibility 0s var(--ld-accordion-panel-transition-duration) linear;
}
