.me-accordion {
  --me-accordion-icon-expand: url('../../images/icons/plus.svg');
  --me-accordion-icon-collapse: url('../../images/icons/minus.svg');
  --me-accordion-icon: var(--me-accordion-icon-expand);
  --me-accordion-icon-color: gray;
}

.me-accordion__accordion {
  border-bottom: 1px solid #e0e0e0;
}

.me-accordion .icon--icon_up_right svg path,
.me-accordion .icon--icon_down_right svg path {
  fill: gray;
}

.me-accordion__trigger {
  margin: 0;
  align-items: center;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #f8f8f8;
  padding: 10px;
  font-size: 1em;
}

.me-accordion__trigger:after {
  content: "";
  mask-image: var(--me-accordion-icon);
  mask-position: center;
  mask-repeat: no-repeat;
  height: 1em;
  width: 1em;
  display: block;
  background-color: var(--me-accordion-icon-color);
  transition: transform .35s ease-in-out;
  transform: rotate(-90deg);
  transform-origin: center;
}

.me-accordion__content {
  padding: 10px;
}

.me-accordion__content {
  display: none;
}

.me-accordion.is-open {
  --me-accordion-icon: var(--me-accordion-icon-collapse);
}

.me-accordion.is-open .me-accordion__trigger:after {
  transform: rotate(0);
}

.me-accordion__content.is-open {
  display: block;
}