:root {
  --accordion-background-color: var(--color-cyan-light);
  --accordion-icon-color: var(--color-orange);
  --accordion-summary-font-size: 2rem;
  --accordion-content-font-size: var(--body-font-size);
}

.accordion {
  background-color: var(--accordion-background-color);
}

.accordion__summary {
  appearance: none;
  display: block;
  font-size: var(--accordion-summary-font-size);
  font-weight: 600;
  line-height: var(--line-height-body);
  user-select: none;

  &::-webkit-details-marker,
  &::marker {
    display: none;
  }
}

.accordion__summary-inner {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 1.5rem 2rem;
}

.accordion__summary-icon {
  color: var(--accordion-icon-color);
  flex-shrink: 0;
  font-size: 3rem;
  line-height: 0;
  margin-inline-start: auto;
  transition-property: transform;

  .accordion[open] & {
    transform: rotate(180deg);
  }
}

.accordion__content {
  line-height: var(--line-height-body);
  padding: 0 2rem 2rem;
}

.accordion__block {
  & + & {
    margin-block-start: 2rem;
  }

  > * + * {
    margin-block-start: 2rem;
  }
}