/* ==========================================================================
   Code Copy
   ========================================================================== */
.code-header {
  display: flex;
  justify-content: flex-end;
}

.copy-code-button {
  display: grid;
  margin: 0 0 -15px;
  background-color: $secondary-bg-color;
  grid-auto-flow: column;
  align-items: center;
  grid-column-gap: 4px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 8px;

  &::before {
    content: "Copy";
  }

  &::after {
    content: "📋";
    display: block;
  }

  &.copied {
    &::before {
      content: "Copied!";
    }

    &::after {
      content: "✔️";
    }
  }

  &:hover {
    background-color: $quaternary-bg-color;
  }
}