%copy-button {
  color: rgb(var(--tone-blue-500));
  --icon-color: var(--transparent);
}
%copy-button::before {
  @extend %with-copy-action-mask, %as-pseudo;
  --icon-color: rgb(var(--tone-gray-500));
}
%copy-button::after {
  --icon-color: rgb(var(--tone-gray-050));
}
%copy-button:hover:not(:disabled):not(:active),
%copy-button:focus {
  color: rgb(var(--tone-blue-500));
  --icon-color: rgb(var(--tone-gray-050));
}
%copy-button:hover::before {
  --icon-color: rgb(var(--tone-blue-500));
}
%copy-button:active {
  --icon-color: rgb(var(--tone-gray-200));
}