/* Copied unchanged from the ESHLON app: packages/ui/src/components/slides/glass.css. The slide toolbar's glass. */
/**
 * Layered "3D" glass for the slides editor's floating surfaces.
 *
 * Three layers rather than one translucent background:
 *   `::before`  the blurred, tinted, grained pane
 *   `::after`   inset speculars along the lit edges
 *   the element itself carries a graded shadow ramp
 *
 * The ramp is what sells it. A single large shadow reads as a sticker; seven
 * stacked shadows with growing blur and negative spread approximate real
 * penumbra, so the bar looks like it is floating a few millimetres above the
 * slide rather than pasted onto it.
 *
 * The grain is inlined as a data URI. The original recipe pulled a texture from
 * transparenttextures.com; a desktop app should not reach out to a third party
 * to paint a toolbar, and a network hiccup would leave the surface flat.
 * `feTurbulence` produces the same fine tooth with nothing to fetch.
 */

.glass3d {
  --filter-glass3d: blur(13px) brightness(0.91) saturate(2.2);
  --color-glass3d: hsl(189 80% 10% / 0.2);
  --noise-glass3d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");

  position: relative;
  z-index: 4;
  box-shadow:
    0 0 0.75px hsl(205 20% 10% / 0.2),
    0.7px 0.8px 1.2px -0.4px hsl(205 20% 10% / 0.1),
    1.3px 1.5px 2.2px -0.8px hsl(205 20% 10% / 0.1),
    2.3px 2.6px 3.9px -1.2px hsl(205 20% 10% / 0.1),
    3.9px 4.4px 6.6px -1.7px hsl(205 20% 10% / 0.1),
    6.5px 7.2px 10.9px -2.1px hsl(205 20% 10% / 0.1),
    8px 9px 14px -2.5px hsl(205 20% 10% / 0.2);
}

.glass3d::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 3;

  -webkit-backdrop-filter: var(--filter-glass3d);
  backdrop-filter: var(--filter-glass3d);
  background-color: var(--color-glass3d);
  background-image: var(--noise-glass3d);
  background-size: 100px;
  background-repeat: repeat;
}

.glass3d::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 5;

  box-shadow:
    inset 2px 2px 1px -3px hsl(205 20% 90% / 0.8),
    inset 4px 4px 2px -6px hsl(205 20% 90% / 0.3),
    inset 1.5px 1.5px 1.5px -0.75px hsl(205 20% 90% / 0.15),
    inset 1.5px 1.5px 0.25px hsl(205 20% 90% / 0.03),
    inset 0 0 0.25px 0.5px hsl(205 20% 90% / 0.03);
}

.glass3d > * {
  position: relative;
  z-index: 6;
}

/**
 * `position: relative` above is required — the two pseudo-elements are absolute
 * and need this node as their containing block — but it collides with utility
 * classes at equal specificity, so which one wins comes down to stylesheet
 * order. When `relative` won on a dropdown, the menu fell back into normal flow
 * and stretched its whole toolbar around it.
 *
 * Callers keep positioning on a separate wrapper. These are the backstop for
 * when someone forgets.
 */
.glass3d.absolute {
  position: absolute;
}
.glass3d.fixed {
  position: fixed;
}
.glass3d.sticky {
  position: sticky;
}

/**
 * Light variant.
 *
 * The base tint is a dark teal, which suits glass over a dark surround. The
 * editor is light-locked and its icons are near-black, so on the base tint the
 * toolbar would be dark-on-dark. Only the two custom properties change — the
 * layering, grain, ramp and speculars are untouched, and flipping back to the
 * dark surface is a one-line edit here rather than a rewrite of the bars.
 */
.pptd-glass {
  /* Thinner than it was (0.58), and leaning on blur rather than paint to keep
     the icons legible. A bar this size sits over the slide almost permanently,
     so anything approaching opaque is a panel with a rounded corner rather than
     glass — you should be able to see what is underneath it. */
  --filter-glass3d: blur(20px) brightness(1.08) saturate(1.9);
  --color-glass3d: hsl(0 0% 100% / 0.4);
}

/**
 * Menus tint further up than the bars.
 *
 * Not for consistency's sake — a menu is a list of words over whatever the
 * slide has underneath, and text over text is unreadable at any blur. The bars
 * can be thin because their contents are icons with their own weight.
 */
.pptd-glass-menu {
  --filter-glass3d: blur(26px) brightness(1.05) saturate(1.8);
  --color-glass3d: hsl(0 0% 100% / 0.8);
}

/**
 * A lighter shadow than the base recipe.
 *
 * The ramp keeps all seven steps — that graduation is what makes the surface
 * read as lifted rather than stuck on — but at roughly half the opacity and
 * with the offsets pulled in. The original weight suits a large panel; on a
 * 40px-tall bar the same shadow reads as a heavy smudge trailing down-right,
 * and it competes with the slide it is floating over.
 */
.pptd-glass,
.pptd-glass-menu {
  box-shadow:
    0 0 0.75px hsl(205 20% 10% / 0.11),
    0.5px 0.6px 1px -0.4px hsl(205 20% 10% / 0.05),
    1px 1.2px 1.8px -0.8px hsl(205 20% 10% / 0.05),
    1.8px 2.1px 3.1px -1.2px hsl(205 20% 10% / 0.05),
    3.1px 3.5px 5.3px -1.7px hsl(205 20% 10% / 0.045),
    5.2px 5.8px 8.7px -2.1px hsl(205 20% 10% / 0.04),
    6.4px 7.2px 11.2px -2.5px hsl(205 20% 10% / 0.07);
}

/**
 * Speculars on a light pane want to be white rather than the base's pale grey,
 * or the lit edge disappears into the surface it is meant to define.
 */
.pptd-glass::after,
.pptd-glass-menu::after {
  box-shadow:
    inset 2px 2px 1px -3px hsl(0 0% 100% / 0.95),
    inset 4px 4px 2px -6px hsl(0 0% 100% / 0.6),
    inset 1.5px 1.5px 1.5px -0.75px hsl(0 0% 100% / 0.5),
    inset 0 0 0.5px 0.5px hsl(0 0% 100% / 0.35),
    inset 0 -1px 1px -1px hsl(205 20% 20% / 0.06);
}

/**
 * Accessibility: the same surfaces, opaque, when the OS asks for less
 * transparency — matching how the app already treats macOS vibrancy.
 */
@media (prefers-reduced-transparency: reduce) {
  .pptd-glass,
  .pptd-glass-menu {
    --color-glass3d: hsl(0 0% 100% / 1);
    --filter-glass3d: none;
  }
}