.glass {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(160deg, var(--glass-tint), transparent 60%),
    var(--glass-bg-flat);
  border-radius: var(--r-lg);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0.5px var(--glass-inner),
    inset 0 -1px 1px var(--glass-edge-soft),
    inset 0 0 0 0.5px var(--glass-edge-soft);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    var(--glass-edge) 0%,
    transparent 32%,
    transparent 68%,
    var(--glass-edge) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass--blur {
  background:
    linear-gradient(160deg, var(--glass-tint), transparent 60%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.glass--strong {
  background:
    linear-gradient(160deg, var(--glass-tint), transparent 60%),
    var(--glass-bg-strong);
}

.glass--tinted {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.25), transparent 70%),
    color-mix(in srgb, var(--accent) 78%, transparent);
  color: #fff;
}

.glass--lens {
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0.5px var(--glass-inner),
    inset 0 -1px 1px var(--glass-edge-soft),
    inset 0 0 0 0.5px var(--glass-edge-soft),
    inset 0 0 18px -6px var(--glass-inner),
    inset 0 -10px 20px -14px rgba(0, 0, 0, 0.18);
}

.glass--interactive {
  transition:
    transform var(--dur) var(--ease-spring),
    box-shadow var(--dur) var(--ease-out);
}

.glass--interactive:active {
  transform: scale(0.97);
  transition-duration: var(--dur-fast);
}

.glass-divider {
  height: 1px;
  background: var(--separator);
  border: 0;
}