/* =============================================================
   LIQUID GLASS — COMPONENTI
   Layer: components

   Assegna a ogni superficie esistente la taglia di vetro che le compete,
   senza toccare i Razor: il markup resta quello, cambia il materiale.
   Attivo solo sotto [data-ds="lg"] — vedi lg-tokens.css.

   Mappatura semantica (spec §4):
     badge/chip/pill      -> lg-1 (4px)
     card/tile            -> lg-2 (12px)
     navbar/pannelli      -> lg-3 (20px)
     modali/sheet         -> lg-4 (40px)
   ============================================================= */

@layer components {

  /* Blocco condiviso: riempimento, bordo e specular.
     Lo stesso trittico di .lg, applicato alle classi gia' nel markup. */
  :root[data-ds="lg"] :is(
    .lp-badge, .lp-card, .lp-panel, .lp-navbar, .lp-auth-panel,
    .lp-modal, .lp-dropdown, .lp-toast, .lp-code-block
  ) {
    position: relative;
    background-color: var(--lg-fill);
    border: 1px solid var(--lg-edge);
    box-shadow:
      inset 0 1px 0 var(--lg-spec-top),
      inset 0 -1px 0 var(--lg-spec-bottom),
      var(--lg-shadow-2);
  }

  /* Lensing sul bordo, per le stesse superfici */
  :root[data-ds="lg"] :is(
    .lp-badge, .lp-card, .lp-panel, .lp-navbar, .lp-auth-panel,
    .lp-modal, .lp-dropdown, .lp-toast
  )::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 210deg,
      rgba(255,255,255,.55), rgba(255,255,255,.05) 25%,
      rgba(255,255,255,.42) 50%, rgba(255,255,255,.05) 75%,
      rgba(255,255,255,.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
  }

  /* ── Taglia 1: badge e chip ── */
  :root[data-ds="lg"] .lp-badge {
    backdrop-filter: blur(var(--lg-1)) saturate(var(--lg-sat));
    -webkit-backdrop-filter: blur(var(--lg-1)) saturate(var(--lg-sat));
    border-radius: var(--lg-r-pill);
  }

  /* ── Taglia 2: card e tile ── */
  :root[data-ds="lg"] :is(.lp-card, .lp-code-block) {
    backdrop-filter: blur(var(--lg-2)) saturate(var(--lg-sat));
    -webkit-backdrop-filter: blur(var(--lg-2)) saturate(var(--lg-sat));
    border-radius: var(--lg-r-card);
  }
  /* Concentricita' (§4): l'elemento annidato eredita il raggio del
     contenitore meno il proprio padding, invece di un valore a caso. */
  :root[data-ds="lg"] .lp-card > :is(.lp-badge, .lp-card) {
    border-radius: calc(var(--lg-r-card) - var(--lg-pad-card));
  }

  /* ── Taglia 3: navbar e pannelli fluttuanti ── */
  :root[data-ds="lg"] :is(.lp-navbar, .lp-panel, .lp-auth-panel, .lp-dropdown) {
    backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat));
    -webkit-backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat));
    box-shadow:
      inset 0 1px 0 var(--lg-spec-top),
      inset 0 -1px 0 var(--lg-spec-bottom),
      var(--lg-shadow-3);
  }
  :root[data-ds="lg"] :is(.lp-panel, .lp-auth-panel) { border-radius: var(--lg-r-panel); }
  :root[data-ds="lg"] .lp-panel > .lp-card {
    border-radius: calc(var(--lg-r-panel) - var(--lg-pad-panel));
  }

  /* ── Taglia 4: modali e sheet ──
     Qui la sfocatura ha una funzione, non e' decorazione: segnala che
     il fondo e' inerte e che l'interazione e' passata al primo piano. */
  :root[data-ds="lg"] :is(.lp-modal, .lp-toast) {
    backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat));
    -webkit-backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat));
    border-radius: var(--lg-r-modal);
    box-shadow:
      inset 0 1px 0 var(--lg-spec-top),
      inset 0 -1px 0 var(--lg-spec-bottom),
      var(--lg-shadow-4);
  }

  /* Il contenuto deve stare sopra lo pseudo-elemento del lensing */
  :root[data-ds="lg"] :is(.lp-card, .lp-panel, .lp-navbar, .lp-modal) > * {
    position: relative;
    z-index: 1;
  }

  /* ── Fallback: identici a quelli del materiale ── */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-ds="lg"] :is(.lp-badge,.lp-card,.lp-panel,.lp-navbar,.lp-auth-panel,.lp-modal,.lp-dropdown,.lp-toast) {
      background-color: rgba(12, 16, 30, 0.92);
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    :root[data-ds="lg"] :is(.lp-badge,.lp-card,.lp-panel,.lp-navbar,.lp-auth-panel,.lp-modal,.lp-dropdown,.lp-toast) {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background-color: rgba(12, 16, 30, 0.94);
    }
    :root[data-ds="lg"] :is(.lp-badge,.lp-card,.lp-panel,.lp-navbar,.lp-auth-panel,.lp-modal,.lp-dropdown,.lp-toast)::before {
      display: none;
    }
  }
  @media (forced-colors: active) {
    :root[data-ds="lg"] :is(.lp-badge,.lp-card,.lp-panel,.lp-navbar,.lp-auth-panel,.lp-modal,.lp-dropdown,.lp-toast) {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid CanvasText;
      background-color: Canvas;
    }
  }
}