<main>
  <label class="sr-only" for="copy-text">Text to copy</label>
  <input id="copy-text" type="text" value="pop-up-key" readonly disabled>
  <button class="button ripple">Copy to clipboard</button>
</main>
<div id="notification-pop-up" popover="manual">
  <div class="popup-content">
    <span>Copied to clipboard!</span>
    <svg viewBox="0 0 384 512" title="clipboard-check" role="img">
      <path d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm121.2 231.8l-143 141.8c-4.7 4.7-12.3 4.6-17-.1l-82.6-83.3c-4.7-4.7-4.6-12.3.1-17L99.1 285c4.7-4.7 12.3-4.6 17 .1l46 46.4 106-105.2c4.7-4.7 12.3-4.6 17 .1l28.2 28.4c4.7 4.8 4.6 12.3-.1 17z" />
    </svg>
  </div>
</div>

@layer normalize, open-props, base, mdl, demo;

@layer demo {
  /* Demo */

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  [popover] {
    position: fixed;
    top: var(--size-4);
    left: 50%;
    padding: var(--size-4);
    transition: transform 0.2s;
    transform: translate(-50%, calc((200% + var(--size-4)) * -1))
      translateY(calc((200% + var(--size-4)) * var(--show, 0)));
    margin: 0;
    box-shadow: var(--shadow-5);
    border: 0;
    border-radius: var(--radius-3);
    background: var(--blue-3);
    color: var(--gray-0);
  }

  [popover]:open {
    --show: 1;
  }

  .popup-content {
    display: flex;
    align-items: center;
    gap: 1ch;
    font-size: var(--font-size-fluid-0);
    font-weight: var(--font-weight-6);
  }

  span {
    white-space: nowrap;
  }

  svg {
    fill: var(--gray-0);
    width: 2ch;
    min-width: 2ch;
    transform: translateY(-6%);
  }

  input {
    padding: var(--size-4);
    text-align: center;
  }

  main {
    display: flex;
    gap: 1ch;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
}

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

  :where([popover]) {
    margin: auto;
    border-width: initial;
    border-style: solid;
  }

  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: "Google Sans", sans-serif, system-ui;
    align-content: center;
  }
}

const INPUT = document.querySelector("input");
const POPUP = document.querySelector("[popover]");
const BUTTON = document.querySelector("button");

const copyToClipboard = () => {
  if (!POPUP.matches(":open")) {
    // Grab the text and use the clipboard API
    navigator.clipboard.writeText(INPUT.value).then(() => {
      POPUP.showPopover();
      setTimeout(() => POPUP.hidePopover(), 2000);
    });
  }
};

BUTTON.addEventListener("click", copyToClipboard);