/* clipboard styles */
[data-copy], [data-paste] {
  display: none;
}

.copyactive [data-copy], .pasteactive [data-paste] {
  display: unset;
}

/* success message */
[data-copy]::after, [data-paste]::after {
  display: none;
  content: attr(data-done);
  position: absolute;
  font-size: 0.85em;
  font-weight: bold;
  padding: 0.2em 0.5em;
  margin: 0.2em 0;
  color: #fff;
  background-color: #006;
  border-radius: 0.2em;
}

.done[data-copy]::after, .done[data-paste]::after {
  display: block;
  opacity: 0;
  transform: translateY(-1em);
  animation: clipboarddone 1.5s ease;
}

@keyframes clipboarddone {
  70% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}