.card-share svg { display: none; }
.card-share::before {
  content: '';
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M19.6495.799565C18.4834-.72981 16.0093.081426 16.0093 1.99313v1.91959C12.2371 3.86807 9.65665 5.16473 7.9378 6.97554 6.10034 8.9113 5.34458 11.3314 5.02788 12.9862c-.15834.8273.38435 1.4276.95469 1.6349.54486.198 1.27292.1132 1.75879-.4422 1.379-1.5762 4.05814-3.7761 8.26794-3.6325v2.4605c0 1.9117 2.4741 2.7229 3.6402 1.1935l3.7438-4.91006c.8089-1.06094.8089-2.51974 0-3.58068L19.6495.799565ZM7.48201 11.6095C9.28721 10.0341 11.8785 8.55568 16.0093 8.55568h1.0114c.5585 0 1.0112.44535 1.0112.99469l-.0002 3.45653 3.7437-4.91012c.2697-.35365.2697-.83991 0-1.19356l-3.7437-4.91009v2.91425c0 .54932-.4527.99463-1.0112.99463h-1.0112c-4.55 0-6.59334 2.43113-6.59334 2.43113-.94072.99104-1.54612 2.16886-1.93395 3.27636Z'/%3E%3Cpath fill='black' d='M7 1.00391H4c-1.65685 0-3 1.34314-3 3v16c0 1.6569 1.34315 3 3 3h16c1.6569 0 3-1.3431 3-3v-3c0-.5523-.4477-1-1-1s-1 .4477-1 1v3c0 .5523-.4477 1-1 1H4c-.55228 0-1-.4477-1-1v-16c0-.55229.44772-1 1-1h3c.55228 0 1-.44772 1-1 0-.55229-.44772-1-1-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M19.6495.799565C18.4834-.72981 16.0093.081426 16.0093 1.99313v1.91959C12.2371 3.86807 9.65665 5.16473 7.9378 6.97554 6.10034 8.9113 5.34458 11.3314 5.02788 12.9862c-.15834.8273.38435 1.4276.95469 1.6349.54486.198 1.27292.1132 1.75879-.4422 1.379-1.5762 4.05814-3.7761 8.26794-3.6325v2.4605c0 1.9117 2.4741 2.7229 3.6402 1.1935l3.7438-4.91006c.8089-1.06094.8089-2.51974 0-3.58068L19.6495.799565ZM7.48201 11.6095C9.28721 10.0341 11.8785 8.55568 16.0093 8.55568h1.0114c.5585 0 1.0112.44535 1.0112.99469l-.0002 3.45653 3.7437-4.91012c.2697-.35365.2697-.83991 0-1.19356l-3.7437-4.91009v2.91425c0 .54932-.4527.99463-1.0112.99463h-1.0112c-4.55 0-6.59334 2.43113-6.59334 2.43113-.94072.99104-1.54612 2.16886-1.93395 3.27636Z'/%3E%3Cpath fill='black' d='M7 1.00391H4c-1.65685 0-3 1.34314-3 3v16c0 1.6569 1.34315 3 3 3h16c1.6569 0 3-1.3431 3-3v-3c0-.5523-.4477-1-1-1s-1 .4477-1 1v3c0 .5523-.4477 1-1 1H4c-.55228 0-1-.4477-1-1v-16c0-.55229.44772-1 1-1h3c.55228 0 1-.44772 1-1 0-.55229-.44772-1-1-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.card-share::after {
  content: 'Copied link';
  position: absolute;
  z-index: 6;
  right: -2px;
  bottom: calc(100% + 8px);
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.card-share[data-share-state="shared"]::after { content: 'Shared'; }
.card-share.shared::after { opacity: 1; transform: translateY(0); }
.card-share.shared::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.29 5.71a1 1 0 0 1 0 1.42l-11 11a1 1 0 0 1-1.42 0l-5-5a1 1 0 0 1 1.42-1.42L8.7 15.88 18.88 5.7a1 1 0 0 1 1.41 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.29 5.71a1 1 0 0 1 0 1.42l-11 11a1 1 0 0 1-1.42 0l-5-5a1 1 0 0 1 1.42-1.42L8.7 15.88 18.88 5.7a1 1 0 0 1 1.41 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}