.calio-glass-filter-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.calio-glass-filter-enabled,
.calio-glass-filter-yes {
  --calio-glass-filter-blur: 8px;
  --calio-glass-filter-brightness: 105%;
  --calio-glass-filter-contrast: 100%;
  --calio-glass-filter-grayscale: 0%;
  --calio-glass-filter-invert: 0%;
  --calio-glass-filter-opacity: 100%;
  --calio-glass-filter-sepia: 0%;
  --calio-glass-filter-saturate: 120%;
  --calio-glass-filter-hue-rotate: 0deg;
  --calio-liquid-glass-blur: 1px;
  --calio-liquid-glass-filter-url: url(#calio-glass-frosted);
  --calio-liquid-glass-surface-color: rgba(255, 255, 255, 0.22);
  --calio-liquid-glass-surface-opacity: 1;
  --calio-liquid-glass-highlight-opacity: 0.42;
  --calio-liquid-glass-border-color: rgba(255, 255, 255, 0.34);
  --calio-liquid-glass-border-width: 1px;
  --calio-liquid-glass-saturate: 150%;
  --calio-liquid-glass-edge-bleed: 18px;
  --calio-liquid-glass-edge-opacity: 0.55;
}

.calio-glass-filter-backdrop,
.calio-glass-filter-yes.calio-glass-type-backdrop {
  backdrop-filter: blur(var(--calio-glass-filter-blur)) brightness(var(--calio-glass-filter-brightness)) contrast(var(--calio-glass-filter-contrast)) grayscale(var(--calio-glass-filter-grayscale)) invert(var(--calio-glass-filter-invert)) opacity(var(--calio-glass-filter-opacity)) sepia(var(--calio-glass-filter-sepia)) saturate(var(--calio-glass-filter-saturate)) hue-rotate(var(--calio-glass-filter-hue-rotate));
}

.calio-glass-filter-liquid,
.calio-glass-filter-yes.calio-glass-type-liquid_glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: var(--calio-liquid-glass-border-width) solid var(--calio-liquid-glass-border-color);
  backdrop-filter: blur(var(--calio-liquid-glass-blur)) saturate(var(--calio-liquid-glass-saturate));
}

.calio-glass-filter-liquid::before,
.calio-glass-filter-yes.calio-glass-type-liquid_glass::before {
  content: "";
  position: absolute;
  inset: calc(var(--calio-liquid-glass-edge-bleed) * -1);
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background: var(--calio-liquid-glass-surface-color);
  opacity: var(--calio-liquid-glass-surface-opacity);
  backdrop-filter: blur(var(--calio-liquid-glass-blur)) saturate(var(--calio-liquid-glass-saturate));
}

.calio-glass-filter-liquid::after,
.calio-glass-filter-yes.calio-glass-type-liquid_glass::after {
  content: "";
  position: absolute;
  inset: calc(var(--calio-liquid-glass-edge-bleed) * -1);
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: var(--calio-liquid-glass-highlight-opacity);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 42%, rgba(255, 255, 255, 0.18));
  filter: var(--calio-liquid-glass-filter-url);
  mix-blend-mode: screen;
}

.calio-glass-filter-liquid {
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, calc(var(--calio-liquid-glass-edge-opacity) * 0.01));
}

.calio-glass-filter-liquid > *,
.calio-glass-filter-yes.calio-glass-type-liquid_glass > * {
  position: relative;
  z-index: 1;
}