:host {
  /**
  * @prop --klevu-accordion-background transparent: Header background
  * @prop --klevu-accordion-content-height 600px: Maxium height for content
  */
  --background: var(--klevu-accordion-background, inherit);

  display: block;
  padding: var(--klevu-spacing-04) 0;
  border-top: 1px solid var(--klevu-color-neutral-4);
}

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--klevu-animation-duration-normal);
  padding: 0 4px;
}

label {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--background);
  transition: margin var(--klevu-animation-duration-slow) var(--klevu-animation-timing-function);
}

input:checked + label {
  margin-bottom: var(--klevu-spacing-04);
}

input:checked ~ .content {
  max-height: var(--klevu-accordion-content-height, 600px);
  padding: 4px;
}

label klevu-icon {
  color: var(--klevu-color-neutral-8);
  transition: transform var(--klevu-animation-duration-fast) var(--klevu-animation-timing-function);
  user-select: none;
}

input:checked + label klevu-icon {
  transform: rotate(-180deg);
}