@reference "../../../styles/index.css";

.group {
  @apply flex
    w-full
    flex-col
    gap-2;

  /* Default item list spacing for groups */
  .itemList {
    @apply flex
      flex-col
      gap-1;
  }

  .groupName {
    @apply px-2
      py-1
      text-xs
      font-semibold
      text-neutral-800
      dark:text-neutral-600;
  }

  .subGroup {
    @apply flex
      w-full
      flex-col
      gap-1;
  }

  .summary {
    @apply flex
      cursor-pointer
      items-center
      justify-between
      rounded-md
      px-2
      py-1
      text-sm
      font-semibold
      text-neutral-800
      select-none
      hover:bg-neutral-100
      dark:text-neutral-200
      hover:dark:bg-neutral-900;

    list-style: none;

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

    .chevron {
      @apply size-3
        shrink-0
        text-neutral-500
        motion-safe:transition-transform
        dark:text-neutral-200;
    }
  }

  .subGroup[open] > .summary {
    @apply text-brand-600
      dark:text-brand-400;

    .chevron {
      @apply text-brand-600
        dark:text-brand-400
        rotate-180;
    }
  }

  .subItemList {
    @apply mt-1
      ml-2
      flex
      flex-col
      gap-1
      border-l
      border-neutral-200
      pl-2
      dark:border-neutral-800;
  }
}
