.glass-level-1,
.glass-level-2,
.glass-level-3,
.glass-elevated,
.glass-modal,
.glass-control,
.glass-navigation {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-soft);
}

.glass-level-1 { background: var(--glass-1); }
.glass-level-2 { background: var(--glass-2); }
.glass-level-3 { background: var(--glass-3); }
.glass-elevated { background: var(--glass-elevated); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow); }
.glass-modal { background: var(--glass-modal); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow); }
.glass-control { background: var(--glass-control); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-control); }
.glass-navigation { background: var(--glass-navigation); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-level-1 {
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturation));
  }
  .glass-level-2,
  .glass-control {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  }
  .glass-level-3,
  .glass-elevated,
  .glass-modal,
  .glass-navigation {
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturation));
  }
}

.glass-shine::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(132deg, rgba(255, 255, 255, .22), transparent 28%),
    radial-gradient(circle at 82% 4%, rgba(255, 255, 255, .18), transparent 27%);
  content: "";
  pointer-events: none;
}

.energy-glass {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--volt-energy) 22%, var(--glass-3)), var(--glass-2)),
    var(--glass-3);
  border-color: color-mix(in srgb, var(--volt-energy) 42%, var(--glass-border));
}

.water-glass {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--volt-water) 22%, var(--glass-3)), var(--glass-2)),
    var(--glass-3);
  border-color: color-mix(in srgb, var(--volt-water) 42%, var(--glass-border));
}

@media (prefers-reduced-transparency: reduce) {
  .glass-level-1,
  .glass-level-2,
  .glass-level-3,
  .glass-elevated,
  .glass-modal,
  .glass-control,
  .glass-navigation {
    background: var(--glass-elevated);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}