Glass Accordion

'use client';

import './AccordionGroupGlass.css';

/** AccordionGroupGlass — ported from astro-component-kit. */
export interface AccordionGroupGlassProps {
}

export function AccordionGroupGlass({}: AccordionGroupGlassProps) {
  return (
    <>
      <div className="acc-wrap" data-rk-1f7d60="">
        <details open data-rk-1f7d60="">
          <summary data-rk-1f7d60="">How do I install the components?</summary>
          <div className="content" data-rk-1f7d60="">Simply copy the React and CSS code into your project.</div>
        </details>
        <details data-rk-1f7d60="">
          <summary data-rk-1f7d60="">Is this open source?</summary>
          <div className="content" data-rk-1f7d60="">Yes, React Components is free under the MIT license.</div>
        </details>
      </div>
    </>
  );
}

export default AccordionGroupGlass;

/* AccordionGroupGlass — ported from astro-component-kit (data/AccordionGroupGlass.astro) */

.acc-wrap:where([data-rk-1f7d60]) { display: flex; flex-direction: column; gap: 0.5rem; }
details:where([data-rk-1f7d60]) { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; }
summary:where([data-rk-1f7d60]) { padding: 1rem 1.5rem; cursor: pointer; color: #fff; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
summary:hover:where([data-rk-1f7d60]) { background: rgba(255,255,255,0.02); }
summary:where([data-rk-1f7d60])::after { content: "+"; font-size: 1.25rem; transition: transform 0.3s; }
details[open]:where([data-rk-1f7d60]) summary:where([data-rk-1f7d60])::after { transform: rotate(45deg); }
.content:where([data-rk-1f7d60]) { padding: 0 1.5rem 1rem; color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }