/*
 * Accordion
 *
 * Drawn in Figma as `Accordion` (1360:267) and `Accordion Item` (1360:266),
 * from this file rather than the reverse — so the code is the source when the
 * two disagree.
 *
 * Figma's Accordion Item carries a Collapsed/Expanded axis that the React
 * component does NOT own: the open set lives on the container, because a static
 * frame cannot hold a selection. The axis is drawn on the item because that is
 * where the difference is visible, and owned in code where it is decidable.
 *
 * The trigger fills its heading so the whole row is the hit target. A button
 * that only covers its text makes a wide section header mostly dead space.
 */
.ion-accordion {
  font-family: var(--font-family-sans);
  border-top: var(--border-width-default) solid var(--border-subtle);
}

.ion-accordion__item {
  border-bottom: var(--border-width-default) solid var(--border-subtle);
}

.ion-accordion__heading {
  margin: 0;

  /* The heading carries structure, not size: the visible scale belongs to the
   * trigger, so changing headingLevel for document reasons does not resize the
   * control. */
  font: inherit;
}

.ion-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  width: 100%;
  padding: var(--spacing-16) var(--spacing-4);
  border: 0;
  background: none;
  color: var(--text-default);
  font-family: inherit;
  font-size: var(--type-body);
  line-height: var(--type-body-line-height);
  font-weight: var(--font-weight-medium);
  text-align: start;
  cursor: pointer;
}

/* Focus and disabled before :hover, so specificity reads non-decreasing — the
 * same ordering approval-gate.css documents and stylelint enforces. */
.ion-accordion__trigger:focus-visible {
  outline: var(--border-width-thick) solid var(--border-focus);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}

.ion-accordion__trigger:disabled {
  color: var(--text-disabled);
  cursor: default;
}

.ion-accordion__trigger:hover:not(:disabled) {
  color: var(--text-primary);
}

.ion-accordion__indicator {
  display: inline-flex;
  flex: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  color: var(--icon-secondary);
  transition: transform var(--ion-duration-base) var(--ion-ease-out);
}

.ion-accordion__indicator svg {
  width: 100%;
  height: 100%;
}

.ion-accordion__item[data-expanded] .ion-accordion__indicator {
  transform: rotate(180deg);
}

.ion-accordion__trigger:disabled .ion-accordion__indicator {
  color: var(--icon-disabled);
}

.ion-accordion__content {
  padding: 0 var(--spacing-4) var(--spacing-16);
  color: var(--text-secondary);
  font-size: var(--type-body);
  line-height: var(--type-body-line-height);
}