Glass Popover

'use client';

import './PopoverMenuGlass.css';

/** PopoverMenuGlass — ported from astro-component-kit. */
export interface PopoverMenuGlassProps {
}

export function PopoverMenuGlass({}: PopoverMenuGlassProps) {
  return (
    <>
      <div className="popover" data-rk-c14527="">
        <div className="pop-inner" data-rk-c14527="">
          <div className="pop-item" data-rk-c14527="">Edit Account</div>
          <div className="pop-item" data-rk-c14527="">Billing</div>
          <hr data-rk-c14527="" />
          <div className="pop-item logout" data-rk-c14527="">Logout</div>
        </div>
      </div>
    </>
  );
}

export default PopoverMenuGlass;

/* PopoverMenuGlass — ported from astro-component-kit (overlays/PopoverMenuGlass.astro) */

.popover:where([data-rk-c14527]) { width: 180px; background: rgba(10, 10, 20, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.pop-item:where([data-rk-c14527]) { padding: 8px 12px; border-radius: 8px; color: #94a3b8; font-size: 0.85rem; cursor: pointer; }
.pop-item:hover:where([data-rk-c14527]) { background: rgba(255,255,255,0.06); color: #fff; }
.logout:where([data-rk-c14527]) { color: #f87171 !important; }
hr:where([data-rk-c14527]) { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 6px 0; }