/* =========================================================================
   The toggles' glass (ui/glass-toggle.js)

   Every toggle on the page in one glass: a frosted bar, and in it a pill
   of clear glass over the option chosen.

   The bar: a heavy blur of what is behind it, lifted a little and
   saturated so its light pools rather than greys; a fine grain over it,
   as frosted glass has; a thin rim of light, brighter along the top. No
   colour of its own. Under the pill it is cut away, so the pill looks
   through to what is behind the toggle, not through the frost.

   The pill: clear glass, the words over it. What is behind it is seen
   through it, bent at its rim as a lens bends it (where the browser can
   draw that: a displacement built for its size), each colour bent a
   little differently so a hairline fringe shows at the rim. Tinted in the
   colour chosen as coloured glass is, clear through the middle and the
   colour gathering at the rim; a thin body of light in it, so on a dark
   card it reads as lit glass; a sharp light along its upper rim, a
   fainter one along its lower.

   The script puts the pill (--gt-x, --gt-y, --gt-w, --gt-h) on the option
   chosen, gives it that option's colour (--gt-lit), and cuts the hole the
   same size (--gt-hole). The toggles' own pills and glass are set aside
   (the selectors below outweigh theirs).
   ========================================================================= */
@property --gt-x { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --gt-w { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --gt-lit { syntax: "<color>"; inherits: true; initial-value: #dfe7ed; }

:root .glass-toggle.glass-toggle.glass-toggle {
  position: relative;
  isolation: isolate;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

:root .glass-toggle.glass-toggle.glass-toggle.is-ready {
  transition:
    --gt-x 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    --gt-w 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    --gt-lit 0.6s ease;
}

:root .glass-toggle.glass-toggle.glass-toggle::before {
  content: none;
}

/* the bar */
.gt-bar {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(255 255 255 / 0.1),
    rgb(255 255 255 / 0.035) 55%,
    rgb(255 255 255 / 0.06));
  -webkit-backdrop-filter: blur(1.125rem) saturate(1.7) brightness(0.86);
  backdrop-filter: blur(1.125rem) saturate(1.7) brightness(0.86);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    inset 0 0 0 1px rgb(255 255 255 / 0.07),
    inset 0 -1px 0 rgb(0 0 0 / 0.25);
}

/* its grain */
.gt-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.22;
}

/* cut away under the pill */
.glass-toggle.has-choice.is-cut > .gt-bar {
  -webkit-mask:
    var(--gt-hole) var(--gt-x) var(--gt-y) / var(--gt-w) var(--gt-h) no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    var(--gt-hole) var(--gt-x) var(--gt-y) / var(--gt-w) var(--gt-h) no-repeat,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* the words, over the glass: never bent by it (bent, a word was seen
   twice, offset, and fringed in colour, where the lens could not be laid
   true) */
:root .glass-toggle .gt-option.gt-option {
  position: relative;
  z-index: 3;
  background: none;
  box-shadow: none;
}

:root .glass-toggle .gt-option.is-on {
  color: color-mix(in oklab, var(--gt-lit) 62%, #fff);
}

/* the pill */
.gt-pill {
  position: absolute;
  z-index: 2;
  left: 0;
  top: var(--gt-y, 0px);
  width: var(--gt-w);
  height: var(--gt-h, 0px);
  border-radius: 999px;
  translate: var(--gt-x) 0;
  pointer-events: none;
  opacity: 0;
  -webkit-backdrop-filter: saturate(1.5) brightness(1.18);
  backdrop-filter: saturate(1.5) brightness(1.18);
  background:
    linear-gradient(180deg,
      rgb(255 255 255 / 0.15),
      rgb(255 255 255 / 0.06) 45%,
      rgb(255 255 255 / 0.08)),
    radial-gradient(70% 120% at 50% 50%,
      color-mix(in oklab, var(--gt-lit) 4%, transparent) 30%,
      color-mix(in oklab, var(--gt-lit) 16%, transparent) 66%,
      color-mix(in oklab, var(--gt-lit) 34%, transparent) 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--gt-lit) 30%, rgb(255 255 255 / 0.2)),
    inset 1.5px 1.5px 1px -0.5px rgb(255 255 255 / 0.6),
    inset -1px -1.5px 1px -0.5px rgb(255 255 255 / 0.28),
    inset 0 0 10px rgb(255 255 255 / 0.07),
    0 3px 10px -4px rgb(0 0 0 / 0.35);
  transition: opacity 0.4s ease;
}

.glass-toggle.has-choice > .gt-pill {
  opacity: 1;
}

.glass-toggle.is-lensed > .gt-pill {
  -webkit-backdrop-filter: var(--gt-lens) saturate(1.3) brightness(1.06);
  backdrop-filter: var(--gt-lens) saturate(1.3) brightness(1.06);
}

/* On a phone the finish cards' chips lie in their row, not on a toggle
   (finish-card.css): no glass there */
@media (max-width: 47.99rem) {
  .swatch-toggle > .gt-bar,
  .swatch-toggle > .gt-pill {
    display: none;
  }
}