<h1>Cool Person<check-mark name="Cool Person" size="1.5ex"></check-mark>
</h1>

:root {
  --step--2: clamp(0.63rem, calc(0.84rem + -0.27vw), 0.78rem);
  --step--1: clamp(0.88rem, calc(0.96rem + -0.09vw), 0.94rem);
  --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  --step-1: clamp(1.35rem, calc(1.2rem + 0.73vw), 1.77rem);
  --step-2: clamp(1.62rem, calc(1.31rem + 1.53vw), 2.5rem);
  --step-3: clamp(1.94rem, calc(1.39rem + 2.77vw), 3.53rem);
  --step-4: clamp(2.33rem, calc(1.41rem + 4.63vw), 5rem);
  --step-5: clamp(2.8rem, calc(1.32rem + 7.42vw), 7.07rem);
}

body {
  padding: 3em;
  background: #f3f3f3;
  color: #252525;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
    sans-serif;
  font-size: var(--step-1);
}

h1 {
  font-size: var(--step-5);
  line-height: 1.1;
  margin: 0;
}

/* Steal this, then add your own check mark with the 
   <check-mark> element */
class CheckMark extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: "open" });

    root.innerHTML = `
      <svg role="img" aria-label="${this.name}" viewBox="0 0 22 22">
        <path d="M20.396 11a3.487 3.487 0 0 0-2.008-3.062 3.474 3.474 0 0 0-.742-3.584 3.474 3.474 0 0 0-3.584-.742A3.468 3.468 0 0 0 11 1.604a3.463 3.463 0 0 0-3.053 2.008 3.472 3.472 0 0 0-1.902-.14c-.635.13-1.22.436-1.69.882a3.461 3.461 0 0 0-.734 3.584A3.49 3.49 0 0 0 1.604 11a3.496 3.496 0 0 0 2.017 3.062 3.471 3.471 0 0 0 .733 3.584 3.49 3.49 0 0 0 3.584.742A3.487 3.487 0 0 0 11 20.396a3.476 3.476 0 0 0 3.062-2.007 3.335 3.335 0 0 0 4.326-4.327A3.487 3.487 0 0 0 20.396 11zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"/>
      </svg>
      <style>
        svg {
          display: inline-block;
          transform: translateY(0.1em);
          fill: var(--verified-color, ${this.color});
          width: auto;
          height: var(--verified-size, ${this.size});
        }
      </style>
    `;
  }

  get name() {
    return this.hasAttribute("name")
      ? `A verifcation check for ${this.getAttribute(
          "name"
        )}, who is definitely verified`
      : "A verification check showing that I am definitely verified";
  }

  get color() {
    return this.hasAttribute("color") ? this.getAttribute("color") : "#2ca6f8";
  }

  get size() {
    return this.hasAttribute("size") ? this.getAttribute("size") : "2ex";
  }
}

customElements.define("check-mark", CheckMark);