<div class="wrapper">
  <h1>Popopver playground</h1>
  <section>
    <button popovertarget="popover-auto">Auto</button>
    <button interestfor="popover-hint" class="hint">Hint</button>
    <button interestfor="popover-hint2" class="hint">Hint 2</button>
    <button popovertarget="popover-manual" popovertargetaction="show" class="manual">Manual</button>
    <button popovertarget="popover-auto-inner">Auto 2</button>
  </section>
</div>

<div id="popover-auto" role="alert" popover>
  <p>I am the auto popover</p>
</div>

<div id="popover-hint" role="alert" popover="hint">
  <p>Hi, i'm a hint!</p>
</div>
<div id="popover-hint2" role="alert" popover="hint">
  <p>Hi, i'm the second hint!</p>
</div>
<div id="popover-auto-inner" role="alert" popover>
  <p>Hi, i'm the second auto popover!</p>
  <div class="popover-buttons">
    <button interestfor="popover-hint" class="hint">Hint</button>
    <button interestfor="popover-hint2" class="hint">Hint 2</button>
  </div>
</div>

<div id="popover-manual" role="alert" popover="manual">
  <p>Hi, i'm manual!</p>
  <button popovertarget="popover-manual" popovertargetaction="hide" class="manual">Close me</button>
</div>

@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");

button {
  display: block;
  padding: 10px 20px;
  font-family: "Mulish", serif;
  font-size: 1.2rem;
  color: #fff;
  background: rgb(100 255 255 / 0.3);
  backdrop-filter: blur(1px);
  border: 3px solid rgb(255 255 255 / 0.5);
  border-radius: 40px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.4s, border-color 0.4s;
  &:is(:hover, :focus) {
    background: rgb(140 255 255 / 0.5);
  }
}

.hint {
  background: rgb(255 100 200 / 0.3);
  &:is(:hover, :focus) {
    background: rgb(255 100 255 / 0.5);
  }
}

.manual {
  background: rgb(200 250 50 / 0.3);
  &:is(:hover, :focus) {
    background: rgb(250 250 80 / 0.5);
  }
}

[popover] {
  width: 50vw;
  background: rgb(100 255 255 / 0.3);
  padding: 1.4rem;
  border: 3px solid rgb(255 255 255 / 0.5);
  border-radius: 10px;
  font-size: 2rem;
  inset-inline: 2rem auto;
  inset-block: 2rem auto;
  backdrop-filter: blur(8px);
  color: #fff;
  opacity: 0;
  transform: translateY(-30px);
  transition-property: opacity, transform, overlay, display;
  transition-duration: 0.3s;
  transition-behavior: allow-discrete;
  &:popover-open {
    opacity: 1;
    transform: translateY(0);
    @starting-style {
      opacity: 0;
      transform: translateY(30px);
    }
  }
}

[popover="hint"] {
  width: auto;
  inset-inline: auto 2rem;
  background: rgb(255 100 200 / 0.3);
}

[popover="manual"] {
  width: auto;
  inset-block: auto 2rem;
  inset-inline: 2rem 2rem;
  background: rgb(200 250 50 / 0.3);
}

#popover-hint2 {
  margin-top: 100px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "Mulish", serif;
  color: #fff;
  background-image: radial-gradient(
      at 40% 20%,
      hsla(230, 100%, 74%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 80% 0%, hsla(31, 100%, 56%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(197, 100%, 93%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(182, 100%, 76%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(224, 100%, 77%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(84, 100%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(185, 100%, 76%, 1) 0px, transparent 50%);
}

section {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 20px;
}

.popover-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 2vmax;
  background: radial-gradient(rgb(0 0 0 / 0.8) 70%, transparent 30%),
    radial-gradient(rgb(20 20 20 / 0.6) 70%, transparent 15%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
}

h1 {
  font-size: 3rem;
  margin-bottom: 100px;
}

p {
  margin: 0;
}