gatsby-remark-code-buttons/styles.css

Add copy buttons to code snippets

.gatsby-code-button-container {
  touch-action: none;
  display: flex;
  justify-content: flex-end;
  position: relative;
  top: 28px;
  z-index: 100;
  pointer-events: none; }

.gatsby-code-button {
  cursor: pointer;
  pointer-events: initial; }
  .gatsby-code-button:after {
    visibility: hidden;
    position: absolute;
    display: none;
    padding: 5px;
    content: attr(data-tooltip);
    color: #fff;
    font-size: 16px;
    background-color: #000;
    white-space: nowrap; }
  .gatsby-code-button[data-tooltip]:after {
    top: 26px;
    right: 0; }
  .gatsby-code-button[data-tooltip]:hover:after, .gatsby-code-button[data-tooltip]:focus:after {
    visibility: visible;
    display: block;
    z-index: 200; }

.gatsby-code-button-toaster {
  z-index: 500;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  pointer-events: none; }

.gatsby-code-button-toaster-text {
  width: 100%;
  margin: 0 15px;
  max-width: 850px;
  padding: 20px;
  font-size: 24px;
  letter-spacing: -1px;
  font-family: monospace;
  color: #fff;
  background-color: #000;
  border-radius: 2px;
  text-align: center;
  opacity: 0;
  animation: animation 3s cubic-bezier(0.98, 0.01, 0.53, 0.47); }

.gatsby-code-button-buffer {
  position: fixed;
  top: -9999px;
  opacity: 0; }

@keyframes animation {
  0%,
  50% {
    opacity: 1; }
  50%,
  100% {
    opacity: 0; } }