/* =========================
   Accordion
   Figma: not exported as a standalone frame.
   API kept compatible with gnexus-ui-kit.
========================= */

@use "../kit-deps" as *;

.accordion {
  display: grid;
  width: 100%;
  max-width: 760px;
  border: $border-width-base $border-style-base $border-color-muted;
  border-left-width: $border-width-accent;
  border-radius: $radius-md;
  background: $surface-panel-muted;
  overflow: hidden;
}

.accordion-item {
  border-bottom: $border-width-base $border-style-base rgba($neutral-900, 0.08);
  overflow: hidden;

  &:last-child {
    border-bottom: 0;
  }

  &[open],
  &.is-open {
    .accordion-summary {
      color: $neutral-900;
      background: rgba($neutral-900, 0.04);
    }

    .accordion-icon {
      transform: rotate(180deg);
    }
  }
}

.accordion-summary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: $space-3;
  min-height: $control-height-md;
  padding: $space-3 $space-4;
  border: 0;
  color: $neutral-700;
  background: transparent;
  cursor: pointer;
  font-family: $font-family-base;
  font-size: 14px;
  font-weight: $font-weight-semibold;
  line-height: 1.4;
  text-align: left;
  transition: color $motion-base $motion-ease, background-color $motion-base $motion-ease;

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

  &::marker {
    content: "";
  }

  &:focus-visible {
    @include focus_ring;
    position: relative;
    z-index: 1;
  }

  &:hover,
  &.is-hover {
    color: $neutral-900;
    background-color: rgba($neutral-900, 0.04);
  }
}

.accordion-summary-content {
  display: flex;
  align-items: center;
  gap: $space-2;
  min-width: 0;
}

.accordion-icon {
  flex: 0 0 auto;
  font-size: $icon-size-md;
  transition: transform $motion-base $motion-ease;
}

.accordion-panel {
  overflow: hidden;
  padding: $space-4;
  color: $neutral-600;
  font-family: $font-family-base;
  font-size: 14px;
  line-height: 1.5;
  transition:
    height $motion-base $motion-ease,
    opacity $motion-base $motion-ease,
    transform $motion-base $motion-ease;

  > *:first-child {
    margin-top: 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }
}

.disclosure {
  max-width: 520px;
  border: $border-width-base $border-style-base $border-color-muted;
  border-radius: $radius-md;
  background: $surface-panel-muted;

  .accordion-summary {
    min-height: $control-height-sm;
    padding: $space-2 $space-3;
  }

  .accordion-panel {
    padding: $space-3;
  }
}