/* Apple liquid glass (wprod/raVpwJL) on the menu shell.
   Sliding highlight between items (DenDionigi/JodwNzX). */

.liquid-glass {
  --lg-bg: rgba(255, 255, 255, 0.22);
  --lg-highlight: rgba(255, 255, 255, 0.75);
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;
  --glass-reflex-dark: 2;
  --glass-reflex-light: 0.35;
  --saturation: 150%;
  position: relative;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .liquid-glass {
  --lg-bg: rgba(255, 255, 255, 0.28);
  --lg-highlight: rgba(255, 255, 255, 0.85);
  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;
}

.liquid-glass__filter,
.liquid-glass::before,
.liquid-glass::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.liquid-glass__filter {
  z-index: 0;
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  filter: url(#lensFilter) saturate(120%) brightness(1.15);
}

.liquid-glass::before {
  content: "";
  z-index: 1;
  background: var(--lg-bg);
}

.liquid-glass::after {
  content: "";
  z-index: 2;
  box-shadow:
    inset 1px 1px 0 var(--lg-highlight),
    inset 0 0 5px var(--lg-highlight);
}

.liquid-glass > :not(.liquid-glass__filter) {
  position: relative;
  z-index: 3;
}

.liquid-glass__svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mobile-bottom-nav.liquid-glass {
  position: fixed;
}

.mobile-bottom-nav.liquid-glass .mobile-bottom-nav__link,
.mobile-bottom-nav.liquid-glass .mobile-bottom-nav__link:hover,
.mobile-bottom-nav.liquid-glass .mobile-bottom-nav__link.is-active {
  background: transparent;
}