/* .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);

    /* Lighting glow on the top and bottom edges. Depth (0-100) scales it and
       the strong parts of both rings together. */
    box-shadow:
        inset 0 10px 10px -8px rgb(217 217 217 / calc(var(--silicaDepth, 70) / 100)),
        inset 0 -10px 10px -8px rgb(217 217 217 / calc(var(--silicaDepth, 70) / 100));
}

/* The lit edge, two hairline rings cut out with masks (border-image ignores
   border-radius and would go square). Outer ring is dark in the middle,
   inner ring is light at the top and bottom. */
.silicaGlass-yes::before,
.silica::before,
.silicaGlass-yes::after,
.silica::after {
    content: "";
    position: absolute;
    z-index: 1;
    padding: 0.7px;
    border-radius: inherit;
    pointer-events: none;
    -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;
}

.silicaGlass-yes::before,
.silica::before {
    inset: 0;
    background: linear-gradient(180deg, #33333312 0%, rgb(51 51 51 / calc(var(--silicaDepth, 70) / 100)) 25%, rgb(51 51 51 / calc(var(--silicaDepth, 70) / 100)) 75%, #33333312 100%);
}

.silicaGlass-yes::after,
.silica::after {
    inset: 0.7px;
    background: linear-gradient(180deg, rgb(217 217 217 / calc(var(--silicaDepth, 70) / 100)) 0%, #d9d9d912 25%, #d9d9d912 75%, rgb(217 217 217 / calc(var(--silicaDepth, 70) / 100)) 100%);
}

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

.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;
    }
}