/* Button wipe (js/button-wipe.js): on roll-over, and while a button is the current one (aria-current="true", e.g. when the page has scrolled to its section), the button's INVERSE colours
   sweep across it from left to right as a dither gradient: dots on the 3px grid, solid behind the front and thinning out ahead of it. Roll off (or leave the section) and the same sweep carries on and out of the other side.
   One grey throughout: the ink (--color-action) is the dark button, the light button's label, the selected state, the wipe and the frame.
   How it is built: the script adds a copy of the label in the inverse colours (.button__wipe) on top of the button and masks it with the dither. This file keeps the button itself in its
   normal colours (so the hover / current colour change in button.css is not applied twice) and styles that copy.
   Opt in:  ButtonWipe.enable(document)   (adds data-wipe to every .button). */
.button[data-wipe] { position: relative; }
/* the button underneath always keeps its resting colours; the wipe does the changing */
.button[data-wipe], a.button[data-wipe]:hover, button.button[data-wipe]:hover { background: var(--color-action); color: var(--color-bg); box-shadow: inset 0 0 0 1px transparent; }
.button--light[data-wipe], .button--light[data-wipe][aria-current="true"], .visual-button[aria-current="true"] .button--light[data-wipe], a.button--light[data-wipe]:hover, button.button--light[data-wipe]:hover {
  background: var(--color-bg); color: var(--color-action); box-shadow: inset 0 0 0 1px transparent;
}
/* the inverse copy: light for a dark button (default), dark for a light one */
.button__wipe {
  position: absolute; inset: 0; z-index: 1; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 0 20px; pointer-events: none;
  font: var(--weight-bold) var(--fs-cta)/var(--lh-normal) var(--font-text); text-transform: capitalize;
  background: var(--color-bg); color: var(--color-action); box-shadow: inset 0 0 0 1px var(--color-action);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.button__wipe--dark { background: var(--color-action); color: var(--color-bg); box-shadow: none; }
.button__wipe .button__arrow { flex: none; fill: currentColor; }