@utility accordion-stack {
  @apply border-scaffold;

  > *:not(:last-child),
  > *:where(astro-slot, astro-content, astro-island):not(:last-child) > * {
    border-bottom: var(--border-width) solid var(--border-color);
  }

  > *:where(:first-child),
  > *:where(astro-slot, astro-content, astro-island):first-child > * {
    border-radius: 0;
    border-top-left-radius: calc(var(--radius) - var(--border-width));
    border-top-right-radius: calc(var(--radius) - var(--border-width));
  }

  > *:where(:last-child),
  > *:where(astro-slot, astro-content, astro-island):last-child > * {
    border-radius: 0;
    border-bottom-left-radius: calc(var(--radius) - var(--border-width));
    border-bottom-right-radius: calc(var(--radius) - var(--border-width));
  }

  .accordion-title {
    border-radius: inherit;
  }

  .accordion-button {
    border-radius: inherit;
  }
}

@utility accordion {
  padding: 0;

  &:not(.accordion-stack &) {
    @apply border-scaffold;
  }

  *:where([aria-expanded='true'] svg) {
    transform: rotate(90deg);
  }

  svg {
    transition: var(--transition-values);
    transition-property: var(--transition-props);
  }
}

@utility accordion-button {
  & {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--gap);
    width: 100%;
    max-width: 100%;
    padding: calc(var(--spacing) * 4);
    border-width: 0;
    border-radius: inherit;
    font: inherit;
    text-align: left;

    > svg {
      width: 1em;
      height: 1lh;
    }

    &:where(:has(svg + span)),
    &:where(:has(svg + astro-slot)) {
      justify-content: start;
    }
  }
}

@utility accordion-content {
  @apply prose;
  padding: calc(var(--spacing) * 4);
}