/*
 * Relay liquid glass — web translation (from Relay-Music docs / relay_ios_liquid_glass.dart).
 * Layer order: shell (float shadow) → clip → backdrop → face → emboss → flare → content (z-index 2).
 */

:root {
  --relay-glass-blur-strong: blur(8px) saturate(1.2);
  --relay-glass-radius-pill: 32px;
  --relay-glass-radius-chrome: 18px;
  --relay-glass-radius-menu: 20px;
  --relay-glass-flare-inset: 2.25px;
}

/* --- Shell --- */
.relay-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.relay-glass--chrome {
  border-radius: var(--relay-glass-radius-chrome);
}

.relay-glass--pill {
  border-radius: var(--relay-glass-radius-pill);
}

.relay-glass--menu {
  border-radius: var(--relay-glass-radius-menu);
}

/* Full-width bar (e.g. sticky header) — no corner radius */
.relay-glass--bar {
  border-radius: 0;
}

/* libraryLightChromeShadows */
.relay-glass--float-light-chrome {
  box-shadow:
    0 3px 9px -0.5px rgba(0, 0, 0, 0.11),
    0 8px 17px rgba(0, 0, 0, 0.065);
}

/* --- Layers --- */
.relay-glass__backdrop,
.relay-glass__face,
.relay-glass__emboss,
.relay-glass__flare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.relay-glass__backdrop {
  z-index: 0;
  -webkit-backdrop-filter: var(--relay-glass-blur-strong);
  backdrop-filter: var(--relay-glass-blur-strong);
  background: rgba(255, 255, 255, 0.02);
}

/* RelayIosGlassVariant.light — dark theme “light chrome” */
.relay-glass__face--dark-light-chrome {
  z-index: 1;
  border: 0.5px solid rgba(255, 255, 255, 0.34);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.095),
    rgba(255, 255, 255, 0.062)
  );
}

.relay-glass__emboss--dark-light-chrome {
  z-index: 2;
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.095),
    inset 0.5px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.16),
    inset -0.5px 0 0 rgba(0, 0, 0, 0.065),
    0 1px 2.25px -1.5px rgba(0, 0, 0, 0.085),
    0 -1px 2.25px -1.5px rgba(255, 255, 255, 0.035);
}

.relay-glass__flare--dark {
  z-index: 3;
  padding: var(--relay-glass-flare-inset);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 40%
    ),
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(255, 221, 213, 0.1) 100%
    );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  mix-blend-mode: plus-lighter;
}

.relay-glass__content {
  position: relative;
  z-index: 4;
}

@media (prefers-reduced-transparency: reduce) {
  .relay-glass__backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .relay-glass__face--dark-light-chrome {
    background: rgba(28, 28, 30, 0.92);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .relay-glass__flare--dark {
    opacity: 0;
  }
}