/* Base accordion styles */
.accordion {
  @apply w-full;

  /* Performance optimization - contain layout changes */
  contain: layout style;
}

/* Accordion elements */
.accordion__body {
  @apply text-sm;
}

.accordion__body-inner {
  @apply px-4 pt-0 pb-4 text-muted;
}

.accordion__heading {
  @apply flex;
}

.accordion__indicator {
  @apply ml-auto size-4 shrink-0 text-muted;

  /**
   * Transitions
   */
  @apply transition duration-250 motion-reduce:transition-none;

  /* Expanded state for indicator rotation */
  &[data-expanded="true"] {
    @apply -rotate-180;
  }
}

/* Accordion Item - Separator styles */
.accordion__item {
  @apply relative border-none;
}

.accordion__item::after {
  content: "";
  @apply absolute bottom-0 left-0 h-px w-full rounded-full bg-separator;
}

.accordion__item:last-child::after {
  content: none;
}

/* Hide separator when hideSeparator prop is set */
.accordion__item[data-hide-separator="true"]::after {
  display: none;
}
/* ------------------------------------ */

.accordion__trigger {
  cursor: var(--cursor-interactive);

  /* Base Styles */
  @apply flex flex-1 items-center justify-between px-4 py-4 text-left text-sm font-medium no-highlight;

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    opacity 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
  @apply motion-reduce:transition-none;

  /* Hover state */
  @media (hover: hover) {
    &:hover:not([aria-expanded="true"]),
    &[data-hovered="true"]:not([aria-expanded="true"]) {
      background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent 90%);
    }
  }

  /* Pressed state */
  &[data-pressed="true"]:not([aria-expanded="true"]) {
  }

  /* Focus state */
  &:focus-visible:not(:focus),
  &[data-focus-visible="true"] {
    @apply status-focused;
  }

  /* Disabled State */
  &:disabled,
  &[aria-disabled="true"] {
    @apply status-disabled;
  }
}

.accordion__panel {
  opacity: 0;
  height: var(--disclosure-panel-height);
  overflow: clip;

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    height 200ms var(--ease-out-quad),
    opacity 200ms var(--ease-out);
  @apply motion-reduce:transition-none;

  &[data-expanded="true"] {
    will-change: height, opacity;
    opacity: 1;
  }
}

/* Surface variant */
.accordion--surface {
  @apply rounded-3xl bg-surface;

  .accordion__trigger {
    @media (hover: hover) {
      &:hover:not([aria-expanded="true"]),
      &[data-hovered="true"]:not([aria-expanded="true"]) {
        @apply bg-default;
      }
    }
  }

  .accordion__item::after {
    @apply bg-surface-foreground/6;
  }
}

.accordion--surface .accordion__item {
  /* Surface variant separator styling */
  &::after {
    @apply left-[3%] w-[94%];
  }

  /* Special rounding for first and last items in surface variant */
  &:first-child [data-slot="accordion-trigger"] {
    @apply rounded-t-3xl;
  }

  &:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"]))
    [data-slot="accordion-trigger"] {
    @apply rounded-b-3xl;
  }
}