.clipboard {
  position: relative;

  & svg.fa-circle-check {
    /*
      This inserts the solid fa-circle-check icon using
      the techniques described here:
      https://docs.fontawesome.com/web/add-icons/pseudo-elements
    */

    /* Rules not related to Font Awesome */
    color: var(--green);
    font-size: 0.875rem;
    position: absolute;
    right: -5px;
    top: -5px;
  }
}

code[data-controller="clipboard"] {
  background-color: var(--gray-200);
  border-radius: 0.25rem;
  cursor: pointer;
  display: inline-block;
  padding: 0.15rem 0.25rem;
  position: relative;

  & strong {
    color: var(--purple-700);
    font-weight: normal;
  }

  & .fa-circle-check {
    color: var(--green-500);
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 1;
  }
}