Application Accordions Base nested

<div class="space-y-2">
      <details class="group space-y-2 [&_summary::-webkit-details-marker]:hidden" open>
        <summary
          class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
        >
          <span>Team Settings</span>

          <svg
            class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 9l-7 7-7-7"
            />
          </svg>
        </summary>

        <div class="space-y-2 pl-4">
          <details class="group/members [&_summary::-webkit-details-marker]:hidden">
            <summary
              class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
            >
              <span>Members</span>

              <svg
                class="size-4 shrink-0 transition-transform duration-300 group-open/members:-rotate-180"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </summary>

            <div class="p-4">
              <p class="text-gray-700">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae
                hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut
                minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos
                officia. Quos, temporibus perspiciatis!
              </p>
            </div>
          </details>

          <details class="group/roles [&_summary::-webkit-details-marker]:hidden">
            <summary
              class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
            >
              <span>Roles & Permissions</span>

              <svg
                class="size-4 shrink-0 transition-transform duration-300 group-open/roles:-rotate-180"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </summary>

            <div class="p-4">
              <p class="text-gray-700">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae
                hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut
                minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos
                officia. Quos, temporibus perspiciatis!
              </p>
            </div>
          </details>
        </div>
      </details>

      <details class="group space-y-2 [&_summary::-webkit-details-marker]:hidden">
        <summary
          class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
        >
          <span>Integration Settings</span>

          <svg
            class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 9l-7 7-7-7"
            />
          </svg>
        </summary>

        <div class="space-y-2 pl-4">
          <details class="group/keys [&_summary::-webkit-details-marker]:hidden">
            <summary
              class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
            >
              <span>API Keys</span>

              <svg
                class="size-4 shrink-0 transition-transform duration-300 group-open/keys:-rotate-180"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </summary>

            <div class="p-4">
              <p class="text-gray-700">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae
                hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut
                minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos
                officia. Quos, temporibus perspiciatis!
              </p>
            </div>
          </details>
        </div>
      </details>
    </div>