details {
  --accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='hsl%28210,11%25,15%25%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f244d' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  color: var(--accordion-color, var(--body-color));
  background-color: var(--accordion-bg, var(--body-bg));
  border: var(--accordion-border-width, 1px) solid var(--accordion-border-color, var(--border-color));
  border-radius: var(--accordion-border-radius, var(--border-radius));
  margin-bottom: 1rem;
  overflow: hidden;
}

details > summary {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--accordion-btn-padding-y, 1rem) var(--accordion-btn-padding-x, 1.25rem);
  color: var(--accordion-btn-color, var(--body-color));
  background-color: var(--accordion-btn-bg, var(--body-bg));
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  flex-shrink: 0;
  background-image: var(--accordion-btn-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
}

details[open] > summary {
  color: var(--accordion-active-color, #0f244d);
  background-color: var(--accordion-active-bg, #e7e9ee);
  box-shadow: inset 0 calc(-1 * var(--accordion-border-width, 1px)) 0 var(--accordion-border-color, var(--border-color));
}

details[open] > summary::after {
  background-image: var(--accordion-btn-active-icon);
  transform: rotate(-180deg);
}

details > :not(summary) {
  padding: 0 var(--accordion-body-padding-x, 1.25rem) var(--accordion-body-padding-y, 1rem);
}

details > summary + * {
  margin-top: .75rem;
}

details ul,
details ol {
  margin-left: 1rem;
  padding-left: 2rem;
}