/* cta — two kinds of call to action.

   `solid` is a box and `link` is the words. js/cta.js sets custom properties -
   --cta-fill, --cta-ink, --cta-radius, --cta-border-w / -c, --cta-drop and the
   padding pair (a link gets no fill, border or drop) - and, on a link, the
   plain classes `underline` and `arrow`. What were eleven fixed shapes are
   settings of a solid: a pill is full radius, an outline is no fill and a
   border, a hard shadow is an unblurred drop, and so on.

   Everything added to the label - the arrow, the underline - is a
   pseudo-element of the INNER `.label`, never of the button itself. The button
   is an `.editable`, and `.editable::before` and `::after` are already spoken
   for: they are the hover outline and the name tag every block on the cover
   carries. Hanging a decoration on those two inherits their `opacity: 0` and
   their position (absolute, above and to the left), which is why a style drawn
   that way was invisible until hover and then landed in the wrong place. */

.cta {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--cta-pad-y, 12px) var(--cta-pad-x, 22px);
  width: max-content; max-width: 100%;
  line-height: 1.1; white-space: nowrap;
  background: var(--cta-fill);
  /* Drawn in the box rather than outside it, so turning it on does not move
     the words. */
  border: var(--cta-border-w, 0px) solid var(--cta-border-c, transparent);
  border-radius: var(--cta-radius, 0px);
  box-shadow: var(--cta-drop, none);
  color: var(--cta-ink);
  cursor: move;                      /* a block to place, not a link to follow */
}
/* The words, and the only thing the options may decorate. */
.cta > .label { display: inline-block; position: relative; }

/* ---- link: the words, on the same edge as the type beside it ---- */
.cta.link { padding-left: 0; padding-right: 0; }

/* A drawn line rather than text-decoration, at a weight of its own. The arrow
   is inside the label (its ::after), so with both on the line stops short of
   it - the arrow's width and its margin - and underlines the words only. */
.cta.link.underline .label::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.3em;
  height: 2px; background: currentColor;
}
.cta.link.underline.arrow .label::before { right: 1.6em; }

.cta.link.arrow .label::after {
  content: "→"; display: inline-block;   /* inline-block, or the nudge on hover has nothing to move */
  margin-left: .5em; font-size: 1.05em; line-height: 1;
  transition: transform .12s ease;
}
.cta.link.arrow:hover .label::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .cta.link.arrow .label::after { transition: none; }
}