/* Sentinel effects - v2/fx-gooey.css
   The few rules v2/fx-gooey.js needs: the liquid layer under a group's content, the pieces riding on it made
   transparent (the liquid is their surface), the chosen label's colour, the labels split by a dark pill while it
   moves, and the reveal for content inside a piece that has to pull clear first. Colours are the theme's tokens; the
   liquid's own colours are read by the script. Nothing here sets an item's position or replaces its transitions.
   Ported from liquid-gooey (libraries.dev) by Jakub Antalik, MIT License - see LICENSE-liquid-gooey.txt. */

/* the group: its own stacking context, so the layer at z-index -1 paints over the group's background and under
   every child (positioned or not); positioned only when it was static */
.sfx-goo { isolation: isolate; }
.sfx-goo.sfx-goo-rel { position: relative; }

.sfx-goo-layer {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: -1;
}
/* the shapes scale and stretch about their own centre */
.sfx-goo-layer rect { transform-box: fill-box; transform-origin: center; }

/* a piece of liquid and a choice of the indicator: the liquid is the surface, so the element's own ground goes
   (the weight repeated to win over the component sheets - .dx.dx .btn, .cl-seg button[aria-pressed] - by order).
   An unchosen choice keeps its hover ground while the liquid rests; while it moves (.sfx-goo-run) none shows. */
.sfx-goo.sfx-goo .sfx-goo-item.sfx-goo-item,
.sfx-goo.sfx-goo .sfx-goo-tab.sfx-goo-tab {
  border-color: transparent;
  box-shadow: none;
}
.sfx-goo.sfx-goo .sfx-goo-item.sfx-goo-item,
.sfx-goo.sfx-goo .sfx-goo-tab.sfx-goo-tab:not(:hover),
.sfx-goo.sfx-goo .sfx-goo-tab.sfx-goo-tab.sfx-goo-on,
.sfx-goo.sfx-goo.sfx-goo-run .sfx-goo-tab.sfx-goo-tab {
  background-color: transparent;
  background-image: none;
}
/* the chosen label takes the ink of a light liquid (a host whose own chosen style was light-on-dark stays legible) */
.sfx-goo:not(.sfx-goo-split) .sfx-goo-tab.sfx-goo-on { color: var(--ink-1); }

/* A dark liquid (tone "brand" or "ink"): the text colour that reads on it */
.sfx-goo-brand { --sfx-goo-lit: var(--on-brand); }
.sfx-goo-inked { --sfx-goo-lit: var(--surface-card); }
/* at rest the chosen label is lit; the label's own `color` is left to the host (hover, transitions), only the glyphs'
   fill changes */
.sfx-goo.sfx-goo-split:not(.sfx-goo-run) .sfx-goo-tab.sfx-goo-on { -webkit-text-fill-color: var(--sfx-goo-lit); }
.sfx-goo.sfx-goo-split:not(.sfx-goo-run) .sfx-goo-tab.sfx-goo-on svg,
.sfx-goo.sfx-goo-split.sfx-goo-run .sfx-goo-tab.sfx-goo-lit svg { color: var(--sfx-goo-lit); }
/* while it moves every label is split where the liquid lies under it: a gradient clipped to the text, lit between
   the stops the script writes (--sfx-goo-a / -b, px along the row from the label's padding edge), its own colour
   outside them - so no part of a label ever sits on a ground it cannot be read on */
.sfx-goo.sfx-goo.sfx-goo-split.sfx-goo-run .sfx-goo-tab.sfx-goo-tab {
  background-image: linear-gradient(var(--sfx-goo-dir, 90deg),
    currentColor var(--sfx-goo-a, 0px), var(--sfx-goo-lit) var(--sfx-goo-a, 0px),
    var(--sfx-goo-lit) var(--sfx-goo-b, 0px), currentColor var(--sfx-goo-b, 0px));
  background-origin: padding-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* THE VIEW SWITCHES (v2/fx-places.js): Files' own sliding pill gives way to the liquid */
.dx .fvw-seg.sfx-goo .fvw-pill { display: none; }

/* a driven piece is moved with transforms written by the script */
.sfx-goo .sfx-goo-item { will-change: transform; }

/* content that waits inside its piece until the piece has pulled clear of the one it hides behind: hidden (and a
   little soft) while merged, sharp once the piece carries .sfx-goo-out (the script sets it at 0.7 of the way out);
   it goes at once on the way back */
.sfx-goo-reveal {
  opacity: 0;
  filter: blur(2px);
  transition: opacity 110ms ease, filter 110ms ease;
}
.sfx-goo-out .sfx-goo-reveal,
.sfx-goo-out.sfx-goo-reveal {
  opacity: 1;
  filter: blur(0);
  transition-duration: 200ms;
  transition-delay: 20ms;
}