/* =============================================================================
   KINKO DESIGN SYSTEM — Accordion
   Spec: components/accordion.md
   Figma: node 2414:70375 (Misc. 🟡 page) — COMPONENT_SET
   Variants: Property 1 = Default | slot
   ============================================================================= */

/* 1. Component tokens — aliases to semantic tokens */
:root {
  --accordion-border:   var(--border-default);    /* grey-200 — bottom divider line */
  --accordion-question: var(--text-primary);       /* navy-900 — question text */
  --accordion-answer:   var(--text-secondary);     /* grey-500 — answer text */
}

/* 2. Component styles */

/* ── Outer row: bottom border only, vertical layout ── */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-12) 0;
  border-bottom: var(--border-width-small) solid var(--accordion-border);
  width: 100%;
}

/* ── Header row: question + caret icon ── */
.accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Question text ── */
.accordion__question {
  flex: 1;
  min-width: 0;
  color: var(--accordion-question);
  margin: 0;
}

/* ── Caret icon — rotates 180° when open ── */
.accordion__icon {
  flex-shrink: 0;
  color: var(--accordion-question);
  transition: transform 0.2s ease;
}

/* Default variant: rotate caret down to indicate open */
.accordion__icon {
  transform: rotate(0deg); /* CaretDown points down = open */
}

/* ── Closed state ── */
.accordion--closed .accordion__icon {
  transform: rotate(-90deg); /* caret points right = closed */
}

.accordion--closed .accordion__body,
.accordion--closed .accordion__slot {
  display: none;
}

/* ── Answer text (Default variant) ── */
.accordion__body {
  padding: 0;
}

.accordion__answer {
  color: var(--accordion-answer);
  margin: 0;
}

/* ── Custom content slot (slot variant) ── */
.accordion__slot {
  width: 100%;
}