:root {
  interpolate-size: allow-keywords;
}

details {
  overflow: hidden;
}

details * {
  margin: 0;
}

details > p:first-child {
  padding-top: 1rem;
}

details > p:last-child {
  padding-bottom: 1rem;
}

details::details-content {
  block-size: 0;
  transition: block-size 0.35s, content-visibility 0.35s;
  transition-behavior: allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

details:not([open])::details-content {
  transition-delay: 0.075s;
}

summary {
  padding: 1.5rem 1rem;
  transition: 0.15s;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--accordion-bg, rgba(0, 0, 0, 0.05));
  color: var(--accordion-color, #000);
  cursor: pointer;
}
summary:hover, details[open] summary {
  background-color: var(--accordion-bg-open, var(--accordion-bg), #000);
  color: var(--accordion-color-open, var(--accordion-color, #fff));
}
summary * {
  color: currentColor;
}
summary i {
  color: var(--accordion-icon-color, currentColor);
  font-size: 1em;
  position: relative;
  transform: rotate(0deg);
  transition: 0.35s transform;
}
details[open] summary i {
  transform: rotate(var(--accordion-icon-open-rotation, -45deg));
}
summary:focus-visible {
  outline-offset: -0.25rem;
  outline: 0.25rem auto -webkit-focus-ring-color;
}
summary::-webkit-details-marker, summary::marker {
  display: none;
  color: transparent;
}

.accordion {
  --accordion-bg: transparent;
  --accordion-bg-open: transparent;
  --accordion-color: #000;
  --accordion-color-open: #000;
  border-bottom: 1px solid var(--accordion-color);
}
.accordion__summary-title {
  font-size: var(--normal-text);
  line-height: var(--normal-text-line-height);
  font-weight: 500;
}
.accordion__content {
  padding-block: 1rem 3rem;
  background-color: var(--accordion-content-bg, transparent);
}