/* Restrained liquid-glass surfaces for navigation and transient overlays only. */

.liquid-glass {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--line-strong) 74%, rgba(125, 211, 252, .22));
  background: rgba(8, 13, 24, calc(.42 + var(--liquid-glass-frost, .16)));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(203, 226, 244, .13),
    inset 0 -1px 0 rgba(2, 6, 14, .34);
}

html[data-theme="light"] .liquid-glass {
  border-color: rgba(91, 111, 132, .22);
  background: rgba(244, 242, 234, calc(.48 + var(--liquid-glass-frost, .16)));
  box-shadow:
    0 18px 42px rgba(53, 60, 68, .13),
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 -1px 0 rgba(91, 111, 132, .12);
}

.liquid-glass-layers,
.liquid-glass-filter-defs {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  border-radius: var(--liquid-glass-radius, inherit);
  overflow: hidden;
  pointer-events: none;
}

.liquid-glass-backdrop,
.liquid-glass-edge,
.liquid-glass-rim {
  position: absolute;
  inset: -1px;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

.liquid-glass-edge {
  inset: -2px;
  padding: var(--liquid-glass-edge-width, 5px);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.liquid-glass-rim {
  inset: 0;
  box-shadow:
    inset 0 1px 1px rgba(215, 235, 250, .24),
    inset 0 -1px 0 rgba(78, 106, 130, .14),
    inset 0 0 18px rgba(125, 211, 252, .035);
}

html[data-theme="light"] .liquid-glass-rim {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .86),
    inset 0 -1px 0 rgba(91, 111, 132, .12),
    inset 0 0 18px rgba(255, 255, 255, .18);
}

.liquid-glass--chromatic .liquid-glass-rim {
  box-shadow:
    inset 0 1px 1px rgba(215, 235, 250, .3),
    inset 0 -1px 0 rgba(78, 106, 130, .12),
    inset 0 0 20px rgba(125, 211, 252, .05),
    inset 0 0 0 1px rgba(148, 214, 240, .045);
}

.liquid-glass > :not(.liquid-glass-layers):not(.liquid-glass-filter-defs) {
  position: relative;
  z-index: 2;
}

.topbar-inner.liquid-glass {
  position: relative;
}

@media (min-width: 901px) {
  html.liquid-glass-enabled .topbar {
    padding-top: 4px;
    border-bottom-color: transparent;
    background: transparent;
    backdrop-filter: none;
  }

  html.liquid-glass-enabled[data-theme="light"] .topbar { background: transparent; }

  .topbar-inner.liquid-glass {
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 66%, rgba(125, 211, 252, .24));
    border-radius: var(--liquid-glass-radius, 18px);
  }

}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass { background: rgba(8, 13, 24, .96); }
  html[data-theme="light"] .liquid-glass { background: rgba(244, 242, 234, .97); }
  .liquid-glass-backdrop,
  .liquid-glass-edge { display: none; }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
  .liquid-glass-backdrop,
  .liquid-glass-edge { display: none !important; }
}