.copy-button {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity 200ms;

  @media (--can-hover) {
    &:hover .copy-button__inner {
      background: var(--color-link-hover);
    }
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    background-color: var(--color-success);
    visibility: hidden;
    pointer-events: none;
    transform: scale(1);
    transition: transform 400ms ease-out, opacity 400ms;
  }

  &__inner {
    @apply --squircle;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: white;
    pointer-events: none;
  }

  &__icon--initial {
    display: flex;
    transform: translateZ(0);
  }

  &__icon--success {
    display: none;
    width: 24px;
    height: 24px;
    color: white;
  }

  &__copied {

    &::before {
      opacity: 0;
      visibility: visible;
      transform: scale(3.5);
    }

    .copy-button__inner,
    .copy-button__inner:hover {
      background: var(--color-success) !important;
      animation: check-square-in 250ms ease-in;
    }

    .copy-button__icon--initial {
      display: none;
    }

    .copy-button__icon--success {
      display: flex;
      animation: check-sign-in 350ms ease-in forwards;
    }
  }

  @keyframes check-sign-in {
    from {
        transform: scale(.7);
    }
    80% {
        transform: scale(1.1);
    }
    to {
        transform: none;
    }
  }

  @keyframes check-square-in {
    from {
      transform: scale(1.05);
    }
    80% {
      transform: scale(.96);
    }
    to {
      transform: none;
    }
  }
}