.accordion {
  --accordionTriggerPaddingVertical: var(--padding--lg);
  --accordionTriggerPaddingHorizontal: var(--padding--lg);
  --accordionContentPadding: var(--padding--lg);
  --accordionTitleFontSize: var(--fontSize--headline-h3);
  --accordionTitleFontWeight: var(--fontWeight--headline-h3);
  --accordionTitleLineHeight: var(--lineHeight--headline-h3);
  --accordionTitleLetterSpacing: var(--letterSpacing--headline-h3);
}

.accordion--dense {
  --accordionTriggerPaddingVertical: var(--padding--sm);
  --accordionTitleFontSize: var(--fontSize--headline-h5);
  --accordionTitleFontWeight: var(--fontWeight--headline-h5);
  --accordionTitleLineHeight: var(--lineHeight--headline-h5);
  --accordionTitleLetterSpacing: var(--letterSpacing--headline-h5);
}

.accordion__title {
  font-family: var(--fontFamily--headline);
  font-size: var(--accordionTitleFontSize);
  font-weight: var(--accordionTitleFontWeight);
  line-height: var(--accordionTitleLineHeight);
  letter-spacing: var(--accordionTitleLetterSpacing);
}

.accordion__content {
  display: none;
  padding: var(--accordionContentPadding);
}

.accordion__content--open {
  display: block;
}

.accordion__trigger {
  cursor: pointer;

  z-index: var(--elevation--default);

  display: block;

  width: 100%;
  padding: var(--accordionTriggerPaddingVertical) var(--accordionTriggerPaddingHorizontal);

  text-align: left;

  background: rgb(var(--background--neutral-base-default--light));
  border: none;
  box-shadow: none;
}

.accordion__trigger__inner {
  position: relative;

  display: flex;
  gap: var(--gap--xl);
  align-items: center;
  justify-content: space-between;
}

.accordion--withBackground .accordion__trigger {
  background: rgb(var(--background--neutral-low-default--light));
}

.accordion--dividerTop .accordion__item {
  border-top: 1px solid rgb(var(--border--neutral-low-default--light));
}

.accordion--dividerBottom .accordion__item {
  border-bottom: 1px solid rgb(var(--border--neutral-low-default--light));
}

.accordion--dividerTopBottom .accordion__item {
  border-top: 1px solid rgb(var(--border--neutral-low-default--light));
}

.accordion--dividerTopBottom .accordion__item:last-child {
  border-bottom: 1px solid rgb(var(--border--neutral-low-default--light));
}

.accordion__item--open .accordion__trigger .icon {
  transform: rotate(180deg);
}