.accordion {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.accordion .accordion-title {
  font-weight: 700;
  line-height: 35px;
  padding: 0 0 0 0.5em;
  border-bottom: none;
  cursor: pointer;
  color: oklch(from var(--primary-text) calc(l + 0.4) c h);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.accordion .accordion-title ~ .accordion-title {
  border-top: 1px solid var(--border-color);
}

.accordion .accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  overflow: hidden;
  margin: 0 1em 0em 1em;
}

.accordion .accordion-inner {
  min-height: 0;

}

.accordion .accordion-content.accordion-content-active {
  grid-template-rows: 1fr;
  margin: 0 1em 1em 1em;
}

.accordion .accordion-title::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;

  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);

  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: currentColor;

  transition: transform 0.3s ease;
  vertical-align: middle;
  margin-right: 0.25rem;
}

.accordion-title.accordion-title-active {
  color: var(--primary-text);
}

.accordion-title.accordion-title-active::before {
  transform: rotate(90deg);
}