~repos /only-bible-app

---
import { Icon } from "astro-icon/components";

type Props = {
  id: string;
  title: string;
};
const { id, title }: Props = Astro.props;
---

<div id={id} class="popover" popover>
  <div class="container">
    <div class="title">
      <h3>{title}</h3>
      <button popovertarget={id} popovertargetaction="hide">
        <Icon class="close-icon" name="carbon:close-large" />
      </button>
    </div>
    <div class="content">
      <slot />
    </div>
  </div>
</div>
<style>
  .popover {
    background: var(--color-box-bg);
    font-weight: 400;
    padding: 1rem;
    width: 100%;
    height: 100%;
    /* top: 10%; */
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 10%;
  }

  .container {
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid black;
    background-color: white;
    opacity: 1;
    padding: 16px;
  }

  .title {
    display: flex;
    align-items: center;
    color: var(--color-text);

    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: 500;
    }

    button {
      svg {
        width: 32px;
        height: 32px;
        color: white;
      }
    }
  }

  .content {
    font-size: 22px;
  }
</style>