/*
  pillLink — a standalone call to action as an outline pill: "View work" on the homepage cards
  (component.json pillLink, v0.48.0; homepage craft pass, approved by Vivek 2026-11-04).
  Spotify's pill with our arrow. Still a real link (<a>): it goes to a page.
  Rest: 1px outline and text in link blue (blue means link on this site), no fill. The outline is always
  the text color (currentColor). Text 20px, 48px tall, trailing 20px arrow (or the lock).
  Spacing: 16px pill padding on both sides plus 8px start padding on the text, so the text sits 24px
  from the left and the arrow 16px from the right: the arrow glyph has its own inset, so equal
  padding looked wider on the right (the Next card's fix).
  Hover (devices that hover) and keyboard focus: dark ink.800 fill, light text, like the Next card;
  focus adds the ring. Pressed: ink.900, instantly. The fill stops inside the outline.
  Inside an Earlier Work card the whole card is the link: the pill has no states of its own there
  (work-list.css).
*/

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pill-link-icon-gap-all);
  height: var(--pill-link-height-all);
  padding-inline: var(--pill-link-padding-all);
  border: var(--pill-link-border-width-all) solid currentColor;
  border-radius: var(--pill-link-radius-all);
  background-clip: padding-box;
  /* no fill at rest (pillLink.fill.default is none) */
  color: var(--pill-link-content-default);
  font-family: var(--pill-link-text-style-all-font-family);
  font-size: var(--pill-link-text-style-all-font-size);
  font-weight: var(--pill-link-text-style-all-font-weight);
  line-height: var(--pill-link-text-style-all-line-height);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition-property: background-color, color;
  transition-duration: var(--pill-link-transition-all-duration);
  transition-timing-function: var(--pill-link-transition-all-easing);
}

.pill-link__text {
  padding-inline-start: var(--pill-link-text-inset-all);
}

.pill-link__icon {
  flex: none;
  width: var(--pill-link-icon-size-all);
  height: var(--pill-link-icon-size-all);
}

@media (hover: hover) {
  .pill-link:hover {
    background-color: var(--pill-link-fill-hover);
    color: var(--pill-link-content-hover);
  }
}

.pill-link:focus-visible {
  background-color: var(--pill-link-fill-focus);
  color: var(--pill-link-content-focus);
  outline: var(--pill-link-focus-ring-width-focus) solid var(--pill-link-focus-ring-color-focus);
  outline-offset: var(--pill-link-focus-ring-offset-focus);
}

.pill-link:active {
  background-color: var(--pill-link-fill-pressed);
  color: var(--pill-link-content-pressed);
  transition-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .pill-link { transition: none; }
}