/* Define the transition on the base element.
  The controller root is the `div` with `data-controller="copy"`.
*/
[data-controller~="copy"] {
  transition: transform 0.15s ease-out;
}

/* Animation state: When copying, scale up the element.
*/
[data-controller~="copy"].is-copying {
  transform: scale(1.05);
}

/*
  Success state: Applied to elements with `data-copy-target="visual"`.
  This will color both the SVG and the <span>.
*/
.is-success {
  color: var(--green-800); /* Or your theme's success color */
}

/*
  Error state: Applied to elements with `data-copy-target="visual"`.
*/
.is-error {
  color: var(--red-800); /* Or your theme's error color */
}