.snippet-card {
  .code-highlight {
    --action-display: none;

    &:hover,
    &:focus-within {
      --action-display: block;
    }

    pre {
      + .action-btn {
        display: var(--action-display);
        position: absolute;
        top: 0.5rem;
        z-index: 1000;
        right: 0;

        &.active {
          animation-name: active;
          animation-duration: 0.5s;
          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition: background 0.25s ease;

          &:before {
            opacity: 0;
            animation-name: active-before;
            animation-duration: 0.65s;
            animation-timing-function: ease-in-out;
          }
        }
      }
    }

    &:last-child {
      margin-block-end: 1.5rem;
    }

    > pre {
      padding-block-end: 1.5rem;
    }

    + .code-highlight {
      margin-top: 0;

      > pre {
        margin-block-start: -0.5rem;

        + .action-btn {
          top: 0;
        }
      }
    }

    &:last-of-type > pre {
      padding-block-end: 1.5rem;
    }
  }
}

@keyframes active {
  0%,
  100% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.15) rotate(3deg);
  }
  40% {
    transform: scale(0.94);
  }
  60% {
    transform: scale(0.98) rotate(-3deg);
  }
  80% {
    transform: scale(1.08);
  }
  99% {
  }
}

@keyframes active-before {
  0%,
  100% {
    opacity: 0;
  }
  30%,
  75% {
    opacity: 1;
  }
}
