/* General */
:root {
  --accordion-animation-timing: 0.316s;
}

[data-accordion-item] {
  width: 100%;
  overflow: hidden;
}

[data-accordion-item] > input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

[data-accordion-item] > label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;

  transition: opacity 0.16s ease-in-out;
}

[data-accordion-item] > label > svg {
  transition: all var(--accordion-animation-timing) ease-out;
}
[data-accordion-panel] {
  max-height: 0;
  transition: padding var(--accordion-animation-timing) ease;
  visibility: hidden;
}
[data-accordion-item] > input:checked ~ [data-accordion-panel] {
  max-height: 100dvh;
  visibility: visible;
}
[data-accordion-item] > input:checked + label > svg {
  transform: rotate(-180deg);
}
@media only screen and (min-width: 801px) {
  [data-accordion-item] > input:checked + label > svg {
    transform: rotate(-180deg);
  }
}

/* Accordion panel visibility */
@media only screen and (min-width: 768px) {
  [data-accordion-item].small-up--show-panel label > svg {
    display: none;
  }
  [data-accordion-item].small-up--show-panel [data-accordion-panel] {
    max-height: 100dvh;
    visibility: visible;
  }
}
@media only screen and (min-width: 1024px) {
  [data-accordion-item].medium-up--show-panel label > svg {
    display: none;
  }
  [data-accordion-item].medium-up--show-panel [data-accordion-panel] {
    max-height: 100dvh;
    visibility: visible;
  }
}