/* Start - Copyable content (Stimulus copyable-content) */

.copyable-text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-md);
}

.copyable-text__text {
  min-width: 0;
}

.copyable-text__button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--primary-900);
}

.copyable-text--copied > .copyable-text__button {
  color: var(--success-600);
  animation: copyable-content-bounce var(--copyable-content-duration, 300ms) ease-out;
}

.input--copied > button > .icon {
  color: var(--success-600);
  animation: copyable-content-bounce var(--copyable-content-duration, 300ms) ease-out;
}

@keyframes copyable-content-bounce {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

/* End - Copyable content */