/* Outline pill fill: a 2px outlined pill that fills solid on hover in 150ms, its outline turning the fill colour in
   the same tween so the ring melts into the fill instead of leaving a dark rim. CSS only.
   Measured from Cabalar Meat Co. (Tailwind `border-2 rounded-full uppercase transition-colors` +
   `hover:bg-green hover:text-white hover:border-green`: 150ms cubic-bezier(.4,0,.2,1)), rewritten.

     <a class="opf" href="#">See the menu</a>                       outline -> fill (the source's main button)
     <a class="opf opf--solid" href="#">Book a table</a>            ink pill -> brighter fill (the big CTA)
     <button class="opf opf--unfill">Send</button>                  ink pill -> empties to an outline (the form submit)
     <a class="opf opf--invert" href="#">Follow along</a>           on a dark ground: white outline -> white fill

   Knobs (on the pill, a parent or :root):
     --opf-ink        outline + label at rest (#17324d)
     --opf-fill       hover fill (#2f7de1)          --opf-on-fill  hover label (#fff)
     --opf-hover-line hover outline (= --opf-fill: the ring disappears into the fill)
     --opf-bg         rest fill (transparent)
     --opf-line 2px · --opf-dur 150ms · --opf-ease cubic-bezier(.4,0,.2,1)
     --opf-pad 12px 24px · --opf-size 16px · --opf-font inherit · --opf-track .02em · --opf-case uppercase
   .is-on holds the filled state (a current nav item, a demo autopilot). Hover runs only on hover-capable pointers,
   so a tap on a phone doesn't leave the pill stuck filled; :active gives touch the fill while pressed. */
.opf {
  --opf-ink: #17324d;
  --opf-fill: #2f7de1;
  --opf-on-fill: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: var(--opf-pad, 12px 24px);
  border: var(--opf-line, 2px) solid var(--opf-ink);
  border-radius: 9999px;
  background-color: var(--opf-bg, transparent);
  color: var(--opf-ink);
  font: inherit; font-family: var(--opf-font, inherit);
  font-size: var(--opf-size, 16px); line-height: 1.5;
  letter-spacing: var(--opf-track, .02em);
  text-transform: var(--opf-case, uppercase);
  text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* colours only (Tailwind transition-colors): nothing changes size or position, so a transform part
     (magnetic-pill) can ride the same element */
  transition-property: color, background-color, border-color;
  transition-duration: var(--opf-dur, 150ms);
  transition-timing-function: var(--opf-ease, cubic-bezier(.4, 0, .2, 1));
}
@media (min-width: 768px) { .opf { padding: var(--opf-pad, 16px 24px); font-size: var(--opf-size, 20px); } }

.opf.is-on,
.opf:active { background-color: var(--opf-fill); color: var(--opf-on-fill); border-color: var(--opf-hover-line, var(--opf-fill)); }
@media (hover: hover) {
  .opf:hover { background-color: var(--opf-fill); color: var(--opf-on-fill); border-color: var(--opf-hover-line, var(--opf-fill)); }
}
.opf:focus-visible { outline: 2px solid var(--opf-ink); outline-offset: 3px; }

/* ink pill that lights up: the big full-width CTA in the source (bg-darkgreen -> hover bg-green, border follows) */
.opf--solid { --opf-bg: var(--opf-ink); color: var(--opf-on-fill); }

/* ink pill that empties to its outline on hover (the source's form submit: hover:bg-transparent hover:text-darkgreen) */
.opf--unfill { --opf-bg: var(--opf-ink); color: var(--opf-on-fill); }
.opf--unfill.is-on, .opf--unfill:active { background-color: transparent; color: var(--opf-ink); border-color: var(--opf-ink); }
@media (hover: hover) { .opf--unfill:hover { background-color: transparent; color: var(--opf-ink); border-color: var(--opf-ink); } }

/* on a dark ground: white outline, fills white and the label takes the ground's colour (the source's footer buttons) */
.opf--invert { --opf-ink: #fff; --opf-fill: #fff; --opf-on-fill: var(--opf-ground, #17324d); }
.opf--invert:focus-visible { outline-color: #fff; }