.Clipboard {
  display: inline-block;
}

.Clipboard:hover {
  cursor: pointer;
}

.Clipboard.animation-scale {
  @keyframes animationCopyToCliboardScale {
    0% {
      transform: scale(1);
    }
    20% {
      transform: scale(0.8);
    }
    40% {
      transform: scale(1);
    }
    60% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  transform: scale(1);
  animation: animationCopyToCliboardScale 500ms ease-in forwards;
}

.Clipboard.animation-jump {
  @keyframes animate-copy-to-clipboard {
    from {
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
    }
    to {
      transform: scaleY(0.7);
      -webkit-transform: scaleY(0.7);
      transform-origin: 0% 0;
      -webkit-transform-origin: 0% 0;
    }
  }

  transform: scaleY(1);
  animation: animate-copy-to-clipboard 200ms ease-out forwards;
}

.Clipboard.animation-jump-back {
  @keyframes animate-copy-to-clipboard-back {
    0% {
      transform: scaleY(0.7);
      -webkit-transform: scaleY(0.7);
      transform-origin: 0% 0;
      -webkit-transform-origin: 0% 0;
    }
    30% {
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
    }
    65% {
      transform: scaleY(0.8);
      -webkit-transform: scaleY(0.8);
    }
    100% {
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
    }
  }

  transform: scaleY(0.7);
  animation:animate-copy-to-clipboard-back 200ms ease-out forwards
}