.accordionItem {
  border-bottom: 1px solid var(--Base-Border-Subtle);
}

.accordionItem.card {
  padding: var(--Spacing-x1);
}

.accordionItem.sidepeek {
  padding: var(--Spacing-x1) 0;
}

.summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--Spacing-x-one-and-half) var(--Spacing-x1);
  cursor: pointer;
  color: var(--Base-Text-High-contrast);
  font-family: var(--typography-Body-Bold-fontFamily);
  font-size: var(--typography-Body-Bold-fontSize);
  font-weight: var(--typography-Body-Bold-fontWeight);
  transition: background-color 0.3s;
}
.summary.card:hover {
  background-color: var(--Base-Surface-Primary-light-Hover-alt);
}
.accordionItem.light .summary:hover {
  background-color: var(--Base-Surface-Primary-light-Hover);
}
.accordionItem.subtle .summary:hover {
  background-color: var(--Base-Surface-Primary-light-Normal);
}

.accordionItem.card .summary {
  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
  border-radius: var(--Corner-radius-md);
}

.accordionItem.sidepeek .summary {
  padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
  align-items: center;
}

.title {
  flex-grow: 1;
}

.content {
  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x1);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s;
}

.chevron {
  transition: transform 0.3s;
  flex-shrink: 0;
}
details[open] .chevron {
  transform: rotate(180deg);
}
