Glass Modal

'use client';

import './OverlayModal.css';

/** OverlayModal — ported from astro-component-kit. */
export interface OverlayModalProps {
}

export function OverlayModal({}: OverlayModalProps) {
  return (
    <>
      <div className="modal-overlay" data-rk-e1e17c="">
        <div className="modal-card anim-scale-up" data-rk-e1e17c="">
          <div className="modal-close" data-rk-e1e17c="">×</div>
          <h3 data-rk-e1e17c="">Confirm Action</h3>
          <p data-rk-e1e17c="">Are you sure you want to proceed with this sensitive operation?</p>
          <div className="modal-actions" data-rk-e1e17c="">
            <button className="cancel" data-rk-e1e17c="">Cancel</button>
            <button className="confirm" data-rk-e1e17c="">Continue</button>
          </div>
        </div>
      </div>
    </>
  );
}

export default OverlayModal;

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

.modal-overlay:where([data-rk-e1e17c]) { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 1000; }
.modal-card:where([data-rk-e1e17c]) { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 2rem; width: 90%; max-width: 400px; box-shadow: 0 40px 100px rgba(0,0,0,0.5); position: relative; }
.modal-close:where([data-rk-e1e17c]) { position: absolute; top: 1rem; right: 1rem; cursor: pointer; color: #94a3b8; font-size: 1.5rem; }
h3:where([data-rk-e1e17c]) { margin: 0 0 1rem; color: #fff; }
p:where([data-rk-e1e17c]) { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }
.modal-actions:where([data-rk-e1e17c]) { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
button:where([data-rk-e1e17c]) { padding: 0.6rem 1.25rem; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; }
.cancel:where([data-rk-e1e17c]) { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.confirm:where([data-rk-e1e17c]) { background: #6366f1; color: #fff; }