/* link styles:
   .link-external  leaves the site, marked with ↗
   .link-internal  stays on the site, marked with →
   .link-copy      copies its data-copy text when clicked, marked with a copy icon
                   (use a <button>; behavior is in js/components/copy.js)
   all work inline and on .row elements */

.link-external,
.link-internal {
  color: inherit;
}

/* inline links get an underline; rows already read as links */
:is(.link-external, .link-internal):not(.row) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--dim, rgba(255, 255, 255, 0.55));
}

:is(.link-external, .link-internal)::after {
  display: inline-block;
  margin-left: 0.3em;
  color: var(--dim, rgba(255, 255, 255, 0.55));
  text-decoration: none;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.link-external::after {
  content: "↗";
}

.link-internal::after {
  content: "→";
}

/* copy: icon drawn as a mask so it takes the text color; swaps to a check once copied */
.link-copy {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E");

  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: inherit;
  color: inherit;
}

.link-copy.is-copied {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

.link-copy::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.3em;
  vertical-align: -0.1em;
  background: var(--dim, rgba(255, 255, 255, 0.55));
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.link-copy.is-copied::after {
  background: var(--accent);
}

/* rows are a full-width button: restore the row's own padding and border */
.row.link-copy {
  width: 100%;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.18));
}

/* on rows the icon sits in the last column, pinned to the first line */
.row:is(.link-external, .link-internal, .link-copy)::after {
  grid-row: 1;
  grid-column: -2;
  margin-left: 0;
}

@media (hover: hover) {
  :is(.link-external, .link-internal):hover::after {
    color: var(--accent);
  }

  .link-external:hover::after {
    transform: translate(0.15em, -0.15em);
  }

  .link-internal:hover::after {
    transform: translateX(0.25em);
  }

  .link-copy:hover::after {
    background: var(--accent);
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.link-external, .link-internal, .link-copy)::after {
    transition: none;
  }
}