/***
 * Copyable element
 *
 * Element that, when clicked, copies a string to the user's clipboard.
 *
 * When hovered, an icon appears. It jumps when the user clicks (thus getting the copy).
 *
 * html:
 *   <span data-copy="Copy Me!">Click to "Copy Me"</span>
 */
[data-copy] {
  @include icon('copy');
  cursor: copy;

  &::before {
    display: inline-block;
    width: 0;
    vertical-align: bottom;
    opacity: 0;
    transform: translateX(-.25em);
    transition: opacity $transition-time linear, transform $transition-time ease-in;
    color: $accent-primary;
  }

  &:hover {
    &::before {
      opacity: 1;
      transform: translateX(-1em);
      transition-timing-function: ease-out;
    }
  }
  &:active {
    &::before {
      transform: translateY(-15%);
      transition-duration: 0s;
    }
  }
}