.tabbar.liquid-glass {

  position: fixed;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--panel-bg) 38%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px) brightness(1.05);
  backdrop-filter: saturate(1.4) blur(16px) brightness(1.05);
  box-shadow:
    0 0 0 0.5px color-mix(in srgb, var(--text) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent),
    inset 0 -0.5px 0 color-mix(in srgb, var(--text) 6%, transparent),
    0 6px 16px rgba(0, 0, 0, 0.1),
    0 18px 40px rgba(0, 0, 0, 0.14),
    0 32px 64px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .tabbar.liquid-glass {
  background: color-mix(in srgb, var(--panel-bg) 32%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px) brightness(1.08);
  backdrop-filter: saturate(1.4) blur(16px) brightness(1.08);
  box-shadow:
    0 0 0 0.5px color-mix(in srgb, #ffffff 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.32),
    0 20px 44px rgba(0, 0, 0, 0.4),
    0 36px 72px rgba(0, 0, 0, 0.36);
}

html[data-theme="light"] .tabbar.liquid-glass {
  background: color-mix(in srgb, #ffffff 42%, transparent);
}

.tabbar.liquid-glass .lg-overlay-bg,
.tabbar.liquid-glass .lg-filter-layer {
  display: none;
}

.tabbar.liquid-glass .lg-content {
  position: relative;
  z-index: 1;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar.liquid-glass {
    background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
  }
}