/* ==========================================================
   LIQUID GLASS — REUSABLE
========================================================== */

.liquidGlass {

    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, .18);

    border-radius: 26px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .13),
            rgba(255, 255, 255, .045));

    backdrop-filter:
        blur(28px) saturate(135%);

    -webkit-backdrop-filter:
        blur(28px) saturate(135%);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .28),

        inset 0 1px 0 rgba(255, 255, 255, .10);

}


/* ==========================================================
   GLASS HIGHLIGHT
========================================================== */

.liquidGlass::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .10),
            transparent 35%,
            transparent 70%,
            rgba(255, 255, 255, .025));

}


/* ==========================================================
   KEEP CONTENT ABOVE GLASS HIGHLIGHT
========================================================== */

.liquidGlass>* {

    position: relative;

    z-index: 1;

}


/* ==========================================================
   OPTIONAL — SUBTLE TOP EDGE
========================================================== */

.liquidGlass::after {

    content: "";

    position: absolute;

    top: 0;

    left: 8%;

    right: 8%;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .22),
            transparent);

    opacity: .8;

}