/* Couches du composant liquid glass (voir liquid-glass.js).
 * Reprend à l'identique les styles en ligne de react-liquid-glass-svg, sortis
 * dans une feuille pour pouvoir être surchargés par thème. */

.lg {
  position: relative;
  overflow: hidden;
  /* Écart assumé avec l'original : les z-index internes (0 à 3) restent dans
   * l'élément. Sans ça, le contenu d'un verre passe devant un autre verre
   * placé plus haut dans la page (menu déroulant sous un lecteur, etc.). */
  isolation: isolate;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
}
.lg--border { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28); }

.lg__layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.lg__refract {
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(calc(var(--lg-blur, 2px) * var(--lg-blur-k, 1)));
  -webkit-backdrop-filter: blur(calc(var(--lg-blur, 2px) * var(--lg-blur-k, 1)));
}
.lg__refract--simple { transform: translateZ(0); will-change: transform; }

.lg__tint { z-index: 1; }

.lg__border {
  z-index: 2;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* `:where()` : le contenu passe au-dessus des couches sans imposer une
 * spécificité qu'une feuille de thème devrait ensuite surenchérir. */
.lg > :where(:not(.lg__layer)) {
  position: relative;
  z-index: 3;
}