/* .silica is the one-class shorthand: silica-wp.js swaps in the effect
   classes, and listing it here too means the base glass paints before any
   script runs. */
.silicaGlass-yes,
.silica {
    position: relative;
    background-image: linear-gradient(180deg, #ffffff2e 0%, #cccccc2e 25%, #cccccc2e 75%, #ffffff2e 100%);
    backdrop-filter: blur(var(--silicaFrost, 2px)) saturate(var(--silicaBrilliance, 1.2)) contrast(var(--silicaClarity, 0.8)) brightness(1.1);
    -webkit-backdrop-filter: blur(var(--silicaFrost, 2px)) saturate(var(--silicaBrilliance, 1.2)) contrast(var(--silicaClarity, 0.8)) brightness(1.1);

    /* Depth: white glow on top and bottom edges only; sides stay clean.
       Driven by a unitless var. */
    box-shadow:
        inset 0 calc(var(--silicaDepth, 0) * 2px) calc(var(--silicaDepth, 0) * 1px) calc(var(--silicaDepth, 0) * -1.5px) rgba(255, 255, 255, calc(var(--silicaDepth, 0) / 40)),
        inset 0 calc(var(--silicaDepth, 0) * -2px) calc(var(--silicaDepth, 0) * 1px) calc(var(--silicaDepth, 0) * -1.5px) rgba(255, 255, 255, calc(var(--silicaDepth, 0) / 40));
}

/* The lit edge: a gradient ring cut out with a mask, because border-image
   ignores border-radius and would go square. */
.silicaGlass-yes::before,
.silica::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0.7px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, #b3b3b34d 0%, #3333334d 25%, #3333334d 75%, #b3b3b34d 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.silica-lighting-overlay {
    pointer-events: none;
    will-change: background;
    border-radius: inherit;
}

/* Engines without SVG backdrop filters (Safari, Firefox) can't run the
   displacement map, so suggest the refraction bezel instead. Set by
   silica-liquid.js when feature detection fails.

   Built entirely from inset box-shadows — NOT a masked ring: mask is
   applied after filter in the paint order, so a masked ring keeps hard
   inner edges no matter how it's blurred and reads as a thick painted
   border. Inset shadows follow the corner radius and fade inward
   naturally. Lives on the pseudo-element because the Depth rule
   writes box-shadow onto the element itself. Light comes from the top and
   bottom, like the edge above; glow size tracks the Refraction slider. */
.silica-liquid-fallback::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 calc(var(--silicaRefraction, 20) * 0.35px) calc(var(--silicaRefraction, 20) * 0.45px) rgba(255, 255, 255, 0.15),
        inset 0 calc(var(--silicaRefraction, 20) * -0.35px) calc(var(--silicaRefraction, 20) * 0.45px) rgba(255, 255, 255, 0.10),
        inset 0 0 calc(var(--silicaRefraction, 20) * 0.9px) rgba(255, 255, 255, 0.06),
        inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.silicaCursor-yes,
.silicaCursor-yes * {
    cursor: none !important;
}

/* Mouse/touch focus stays clean inside cursor-hidden elements, but keyboard
   users keep a visible, glass-friendly focus ring (#a11y). */
.silicaCursor-yes *:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.silicaCursor-yes *:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .silicaGlass-yes,
    .silica-lighting-overlay {
        transition: none !important;
    }
}