:root {
  --glass-distort-angle-a: 128deg;
  --glass-distort-angle-b: 210deg;
}

.glass-soft,
.glass-mid,
.glass-strong,
.glass-fallback-solid {
  border: 1px solid var(--surface-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.glass-soft {
  background: var(--surface-layer-1);
}

.glass-mid {
  background: var(--surface-layer-2);
}

.glass-strong {
  background: var(--surface-layer-3);
}

.glass-distort {
  position: relative;
  isolation: isolate;
}

.glass-distort::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(
      var(--glass-distort-angle-a),
      rgba(255, 255, 255, calc(var(--glass-distort-opacity) * 0.9)),
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(
      var(--glass-distort-angle-b),
      rgba(255, 255, 255, calc(var(--glass-distort-opacity) * 0.5)),
      rgba(255, 255, 255, 0)
    );
  mix-blend-mode: screen;
}

:root:not([data-mode="light"]) .glass-distort::before {
  background:
    linear-gradient(
      var(--glass-distort-angle-a),
      rgba(229, 241, 255, calc(var(--glass-distort-opacity) * 0.75)),
      rgba(229, 241, 255, 0)
    ),
    linear-gradient(
      var(--glass-distort-angle-b),
      rgba(188, 210, 231, calc(var(--glass-distort-opacity) * 0.35)),
      rgba(188, 210, 231, 0)
    );
  mix-blend-mode: soft-light;
}

.surface-elev-1 {
  box-shadow: var(--panel-shadow);
}

.surface-elev-2 {
  box-shadow: var(--panel-shadow-strong);
}

.surface-elev-3 {
  box-shadow: var(--shadow);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass-soft,
  .glass-mid,
  .glass-strong,
  .glass-fallback-solid {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .glass-soft {
    background: color-mix(in srgb, var(--surface-layer-1) 86%, var(--white) 14%);
  }

  .glass-mid {
    background: color-mix(in srgb, var(--surface-layer-2) 84%, var(--white) 16%);
  }

  .glass-strong {
    background: color-mix(in srgb, var(--surface-layer-3) 82%, var(--white) 18%);
  }

  :root:not([data-mode="light"]) .glass-soft,
  :root:not([data-mode="light"]) .glass-mid,
  :root:not([data-mode="light"]) .glass-strong {
    background: color-mix(in srgb, var(--surface-layer-3) 94%, #09111a 6%);
  }
}

@media (prefers-reduced-motion: reduce), (update: slow) {
  .glass-soft,
  .glass-mid,
  .glass-strong {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .glass-distort::before {
    opacity: 0;
  }
}