.accordion {
  position: relative;

  z-index: 2;
}

.accordion__content {
  overflow: hidden;
}

.accordion__title-wrapper {
  position: relative;

  display: block;
  cursor: pointer;

}

.accordion__title {
  display: block;
  outline: 0;

  user-select: none;
}

.accordion__trigger {
  appearance: none;
}

.accordion__arrow {
  position: absolute;
  top: 50%;
  right: 1em;

  width: 0.875em;
  height: 0.875em;

  transform: translate(0, -50%);

  transition: transform 0.5s ease;
}

.accordion--open {
  .accordion__arrow {
    transform: translate(0, -50%) rotate(-180deg);
  }

  .accordion__content-wrapper {
    visibility: visible;
    transition: visibility 0.5s 0s, height 0.5s ease;
  }
}

.accordion--closed {
  .accordion__arrow {
    transform: translate(0, -50%) rotate(0deg);
  }
}

.accordion__content {
  padding: 1rem 0;
}

.accordion__content-wrapper {
  overflow: hidden;
  height: 0;
  visibility: hidden;
  transition: height 0.5s ease, visibility 0s 0.5s;
}

.accordion__title {
  width: calc(100% - 3.5em);
}