/* Shared glass finish. Consumers set --glass-depth and their own layout.
   Hover/focus feedback is reserved for interactive controls. */
:is(.glass-control, .glass-tray, .glass-surface) {
  --glass-ink: #252525;
  --glass-tint: 145 149 156;
  --glass-shadow: 70 74 83;
  --glass-light: 255 255 255;
  --glass-rim: 255 255 255;
  --glass-solid: #f0f1f3;
  --glass-rim-opacity: 1;
  --glass-caustic-opacity: .85;
  --glass-body-opacity: .10;
  --glass-shadow-opacity: .2;
  --glass-tray-shadow: .25;
}

.glass-control {
  --glass-depth: 40px;
  -webkit-tap-highlight-color: transparent;
}

:is(.glass-control, .glass-surface) {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  color: var(--glass-ink);
  background: transparent;
  box-shadow: 0 calc(var(--glass-depth) * .10) calc(var(--glass-depth) * .17) calc(var(--glass-depth) * -.035) rgb(var(--glass-shadow) / var(--glass-shadow-opacity));
}

:root[data-theme="dark"] :is(.glass-control, .glass-tray, .glass-surface) {
  --glass-ink: #f7f7f7;
  --glass-tint: 16 16 16;
  --glass-shadow: 0 0 0;
  --glass-light: 232 236 242;
  --glass-rim: 250 252 255;
  --glass-solid: #303030;
  --glass-rim-opacity: .72;
  --glass-caustic-opacity: .3;
  --glass-body-opacity: .22;
  --glass-shadow-opacity: .3;
  --glass-tray-shadow: .65;
}

/* Preserve system appearance for controls that work without JavaScript. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) :is(.glass-control, .glass-tray, .glass-surface) {
    --glass-ink: #f7f7f7;
    --glass-tint: 16 16 16;
    --glass-shadow: 0 0 0;
    --glass-light: 232 236 242;
    --glass-rim: 250 252 255;
    --glass-solid: #303030;
    --glass-rim-opacity: .72;
    --glass-caustic-opacity: .3;
    --glass-body-opacity: .22;
    --glass-shadow-opacity: .3;
    --glass-tray-shadow: .65;
  }
}

/* A recessed seat for raised controls; not another glass layer. */
.glass-tray {
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(var(--glass-tint) / .15), rgb(var(--glass-light) / .08));
  box-shadow: inset 0 5px 6px -1px rgb(var(--glass-shadow) / var(--glass-tray-shadow)), inset 0 -1px 2px rgb(var(--glass-shadow) / .26), 0 1px 1px rgb(var(--glass-rim) / .11);
}

:is(.glass-control, .glass-surface)::before,
:is(.glass-control, .glass-surface)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

/* Tinted volume and light collecting along the lower curve. */
:is(.glass-control, .glass-surface)::before {
  background:
    radial-gradient(ellipse 75% 52% at 50% 108%, rgb(var(--glass-light) / var(--glass-caustic-opacity)), transparent 90%),
    linear-gradient(180deg, rgb(var(--glass-tint) / var(--glass-body-opacity)), rgb(var(--glass-tint) / .08) 55%, rgb(var(--glass-tint) / .15));
  box-shadow: inset 0 calc(var(--glass-depth) * .035) calc(var(--glass-depth) * .06) rgb(var(--glass-shadow) / .15), inset 0 calc(var(--glass-depth) * -.055) calc(var(--glass-depth) * .08) rgb(var(--glass-light) / .14);
  -webkit-backdrop-filter: blur(1.5px) saturate(115%);
  backdrop-filter: blur(1.5px) saturate(115%);
}

/* Bright upper/lower arcs fade at the sides instead of forming a flat border. */
:is(.glass-control, .glass-surface)::after {
  padding: max(1px, calc(var(--glass-depth) * .024));
  background: linear-gradient(180deg, rgb(var(--glass-rim) / var(--glass-rim-opacity)), rgb(var(--glass-rim) / .08) 28%, transparent 43%, transparent 63%, rgb(var(--glass-rim) / .2) 83%, rgb(var(--glass-rim) / var(--glass-rim-opacity)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: brightness(1);
}

.glass-control::after {
  transition: filter 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.glass-control:hover::after {
  filter: brightness(1.16);
}

.glass-control:focus-visible {
  outline: 2px solid var(--glass-ink);
  outline-offset: 6px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.glass-control, .glass-surface)::before {
    background: var(--glass-solid);
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass-tray {
    background: var(--glass-solid);
    box-shadow: none;
  }

  :is(.glass-control, .glass-surface)::before {
    background: var(--glass-solid);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :is(.glass-control, .glass-surface)::after {
    background: var(--glass-ink);
    padding: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-control::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .glass-tray {
    background: Canvas;
    border: 1px solid ButtonText;
    box-shadow: none;
  }

  :is(.glass-control, .glass-surface) {
    background: Canvas;
    color: ButtonText;
    border: 1px solid ButtonText;
    box-shadow: none;
  }

  :is(.glass-control, .glass-surface)::before,
  :is(.glass-control, .glass-surface)::after {
    display: none;
  }
}