/* PathFacts icons. Generated by scripts/icons/build.mjs from
 * scripts/icons/presets.mjs - edit there and run `npm run icons`. */

.pfi {
  display: inline-block;
  flex: none;
  width: var(--pfi-size, 18px);
  height: var(--pfi-size, 18px);
  vertical-align: -0.2em;
  overflow: visible;
  --pfi-ac: currentColor;
}

/* The accent layer is monochrome at rest and lights lime when its control is
   pointed at or selected, so a row of icons is calm until one is in use. */
.pfi-a { stroke: var(--pfi-ac); transition: stroke var(--t-med, 220ms) ease, filter var(--t-med, 220ms) ease; }
.pfi-dot { fill: currentColor; stroke: none; }
.pfi-a .pfi-dot, .pfi-a.pfi-dot { fill: var(--pfi-ac); transition: fill var(--t-med, 220ms) ease; }
.pfi-check { stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }

:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfi,
:is(.active, [aria-selected="true"], [aria-current="page"], .is-active) > .pfi,
:is(.active, [aria-selected="true"], [aria-current="page"], .is-active) > * > .pfi,
.pfi.pfi-lit,
.pfi-play { --pfi-ac: var(--lime, #9be600); }

:is(.active, [aria-selected="true"], [aria-current="page"], .is-active) > .pfi .pfi-a,
:is(.active, [aria-selected="true"], [aria-current="page"], .is-active) > * > .pfi .pfi-a,
.pfi.pfi-lit .pfi-a { filter: drop-shadow(0 0 2px var(--lime-glow, rgba(155, 230, 0, .22))); }

/* A muted icon stays quiet even when its control is pointed at. */
.pfi.pfi-quiet { --pfi-ac: currentColor !important; }
.pfi.pfi-quiet .pfi-a { filter: none !important; }

.pfi-m {
  transform-box: view-box;
  --pfi-i: 0;
  animation-delay: calc(var(--pfi-i) * 90ms);
}
.pfi-m-trace, .pfi-m-tick { stroke-dasharray: 1; }

:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfi-m-sweep,
.pfi-play .pfi-m-sweep { animation: pfi-sweep var(--t-icon, 800ms) var(--ease-out, ease-out) both; animation-delay: calc(var(--pfi-i) * 90ms); }
:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfi-m-pulse,
.pfi-play .pfi-m-pulse { animation: pfi-pulse var(--t-icon, 800ms) var(--ease-out, ease-out) both; animation-delay: calc(var(--pfi-i) * 110ms); }
:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfi-m-trace,
.pfi-play .pfi-m-trace { animation: pfi-trace var(--t-icon, 800ms) var(--ease-io, ease-in-out) both; animation-delay: calc(var(--pfi-i) * 90ms); }
:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfi-m-orbit,
.pfi-play .pfi-m-orbit { animation: pfi-orbit calc(var(--t-icon, 800ms) * 1.2) var(--ease-io, ease-in-out) both; animation-delay: calc(var(--pfi-i) * 90ms); }
:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfi-m-scan,
.pfi-play .pfi-m-scan { animation: pfi-scan calc(var(--t-icon, 800ms) * 1.1) var(--ease-io, ease-in-out) both; animation-delay: calc(var(--pfi-i) * 90ms); }
:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfi-m-tick,
.pfi-play .pfi-m-tick { animation: pfi-trace calc(var(--t-icon, 800ms) * .75) var(--ease-out, ease-out) both; animation-delay: calc(120ms + var(--pfi-i) * 90ms); }
:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfi-m-blink,
.pfi-play .pfi-m-blink { animation: pfi-blink var(--t-icon, 800ms) ease-in-out both; animation-delay: calc(var(--pfi-i) * 110ms); }
:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfi-m-nudge,
.pfi-play .pfi-m-nudge { animation: pfi-nudge calc(var(--t-icon, 800ms) * .7) var(--ease-out, ease-out) both; animation-delay: calc(var(--pfi-i) * 70ms); }

/* Live states: slow, continuous, and only where something is running. */
.pfi-loop .pfi-m-sweep, .pfi-loop .pfi-m-orbit { animation: pfi-spin 3.6s linear infinite !important; }
.pfi-loop .pfi-m-pulse { animation: pfi-pulse-loop 3s ease-in-out infinite !important; animation-delay: calc(var(--pfi-i) * 300ms) !important; }
.pfi-loop .pfi-m-blink { animation: pfi-breathe 3s ease-in-out infinite !important; }
.pfi-loop .pfi-m-scan { animation: pfi-scan 3.2s ease-in-out infinite !important; }

@keyframes pfi-sweep {
  from { transform: rotate(var(--pfi-rot, -90deg)); opacity: .15; }
  to   { transform: none; opacity: 1; }
}
@keyframes pfi-orbit {
  from { transform: rotate(var(--pfi-rot, -180deg)); }
  to   { transform: none; }
}
@keyframes pfi-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pfi-pulse {
  0%   { opacity: .1; transform: scale(.7); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes pfi-pulse-loop {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50%      { opacity: 1; transform: none; }
}
@keyframes pfi-trace {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes pfi-scan {
  0%   { transform: translate(var(--pfi-fx, 0px), var(--pfi-fy, 0px)); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translate(calc(var(--pfi-fx, 0px) * -1), calc(var(--pfi-fy, 0px) * -1)); }
  100% { transform: none; opacity: 1; }
}
@keyframes pfi-blink {
  0%, 100% { opacity: 1; transform: none; }
  35%      { opacity: .2; transform: scale(.6); }
  70%      { opacity: 1; transform: scale(1.15); }
}
@keyframes pfi-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
@keyframes pfi-nudge {
  from { transform: translate(var(--pfi-fx, 0px), var(--pfi-fy, 0px)); opacity: .35; }
  to   { transform: none; opacity: 1; }
}

/* The brand lockup: the check redraws and the signal arcs come up in turn. */
.pfb { display: block; height: var(--pfb-h, 22px); width: auto; overflow: visible; }
.pfb-ray, .pfb-word { fill: var(--pfb-ink, currentColor); }
.pfb-check { stroke: var(--lime, #9be600); stroke-dasharray: 1; }
:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfb-check, .pfb.pfi-play .pfb-check {
  animation: pfi-trace 700ms var(--ease-out, ease-out) both 160ms;
}
:is(a, button, summary, label, [role="tab"], .pfi-host):is(:hover, :focus-visible) .pfb-ray, .pfb.pfi-play .pfb-ray {
  animation: pfb-ray 900ms var(--ease-out, ease-out) both;
  animation-delay: calc(var(--pfi-i, 0) * 140ms);
}
@keyframes pfb-ray {
  0%   { opacity: .2; }
  100% { opacity: 1; }
}

/* Out-specifies the .pfi-loop rules, which are !important themselves. */
@media (prefers-reduced-motion: reduce) {
  html .pfi .pfi-m, html .pfi.pfi-loop .pfi-m, html .pfb * { animation: none !important; transition: none !important; }
}
html .pfi-still .pfi .pfi-m, html .pfi-still .pfb *, html .pfi.pfi-still .pfi-m { animation: none !important; }