.glass-root {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.glass-filter-host {
  position: absolute;
  inset: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.glass-lens {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--glass-w, 70px);
  height: var(--glass-h, 60px);
  border-radius: var(--glass-r, 20px);
  transform: translate3d(var(--glass-x, 0), var(--glass-y, 0), 0);
  transform-origin: center;
  pointer-events: none;
  z-index: 8;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, calc(var(--glass-glow, .4) * .85)), transparent 15%),
    radial-gradient(circle at 22% 82%, rgba(110, 240, 255, calc(var(--glass-chroma, 1) * .14)), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .08) 36%, rgba(255, 255, 255, .18) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, calc(var(--glass-edge, .5) * .78)),
    inset 0 2px 4px rgba(255, 255, 255, .42),
    inset 0 -16px 28px rgba(26, 34, 54, .24),
    0 2px 4px rgba(255, 255, 255, .18),
    0 18px 48px rgba(31, 36, 56, .24);
}

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

.glass-lens::before {
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow:
    inset 1px 0 0 rgba(255, 96, 120, calc(var(--glass-chroma, 1) * .18)),
    inset -1px 0 0 rgba(60, 220, 255, calc(var(--glass-chroma, 1) * .22));
  mask-image: linear-gradient(135deg, black, transparent 62%);
}

.glass-lens::after {
  inset: 3px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .56), transparent 28%),
    linear-gradient(315deg, transparent 56%, rgba(255, 255, 255, .24));
  mix-blend-mode: screen;
  opacity: .85;
}

.glass-lens.is-pressed {
  transition: transform 90ms ease, width 90ms ease, height 90ms ease, border-radius 90ms ease;
}