.glass {
    --backdrop-filter: 12px;
    --shadow-0-type: inset;
    --shadow-0-hor: 0;
    --shadow-0-ver: 0.5px;
    --shadow-0-blur: 1px;
    --shadow-1-type: inset;
    --shadow-1-hor: 0;
    --shadow-1-ver: -8px;
    --shadow-1-blur: 18px;
    --shadow-2-hor: 0;
    --shadow-2-ver: 10px;
    --shadow-2-blur: 28px;
    --gradient-direction: 165deg;
    --outline-width: 1px;
    --outline-style: outset;
}

.glass, .hover-glass:hover {
    backdrop-filter: blur(var(--backdrop-filter));
    -webkit-backdrop-filter: blur(var(--backdrop-filter));
    
    outline: var(--outline-width) var(--outline-style) var(--outline-color);
    box-shadow:
        var(--shadow-0-type) var(--shadow-0-hor) var(--shadow-0-ver) var(--shadow-0-blur) var(--shadow-0-color),
        var(--shadow-1-type) var(--shadow-1-hor) var(--shadow-1-ver) var(--shadow-1-blur) var(--shadow-1-color),
        var(--shadow-2-hor) var(--shadow-2-ver) var(--shadow-2-blur) var(--shadow-2-color);    
    background-color: var(--background-color);
    background: linear-gradient(
        var(--gradient-direction),
        var(--gradient-0),
        var(--gradient-1) 45%,
        var(--gradient-2)
    );
}

.hover-glass:not(:hover) {
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
    
    outline: unset;
    box-shadow: unset;    
    background-color: unset;
    background: unset;
}


.reflecting-glass {
    --reflection-gradient-direction: 120deg;
    --reflection-gradient-transparence: 60%;
    --color-0: rgba(255,255,255,0.45);
    --color-1: rgba(255,255,255,0.20);
    --color-2: rgba(255,255,255,0.08);
    overflow: hidden;
}

.reflecting-glass::before, .reflecting-glass.hover-glass:hover::before {
    content: "";
    position: absolute;
    
    width: 140%;
    height: 140%;
    left: -20%;
    top: -30%;
    
    background: linear-gradient(
        var(--reflection-gradient-direction),
        var(--color-0),
        var(--color-1) 28%,
        var(--color-2) 45%,
        transparent var(--reflection-gradient-transparence)
    );
        
    transform: rotate(12deg);
    pointer-events: none;
    mix-blend-mode: screen;
}

.reflecting-glass.hover-glass:not(:hover)::before {
    position: unset;
    width: unset;
    height: unset;
    left: unset;
    top: unset;
    background: unset;
    transform: unset;
    pointer-events: unset;
    mix-blend-mode: unset;
}





.blue-glass {
    --shadow-0-color:   rgba(255, 255, 255, 0.45);
    --shadow-1-color:   rgba(0, 0, 0, 0.14);
    --shadow-2-color:   rgba(0, 0, 0, 0.28);
    --gradient-0: rgba(255, 255, 255, 0.28);
    --gradient-1: rgba(80, 130, 220, 0.18);
    --gradient-2: rgba(20, 60, 130, 0.22);
    --background-color: rgba(40, 90, 170, 0.18);
    /* --outline-color: rgba(255, 255, 255, 0.13); */
}

.dark--glass.blue-glass {
    --shadow-0-color:   rgba(255, 255, 255, 0.45);
    --shadow-1-color:   rgba(0, 0, 0, 0.14);
    --shadow-2-color:   rgba(0, 0, 0, 0.28);
    --gradient-0: rgba(255, 255, 255, 0.28);
    --gradient-1: rgba(30, 54, 99, 0.18);
    --gradient-2: rgba(4, 15, 36, 0.22);
    --background-color: rgba(21, 56, 112, 0.18);
    /* --outline-color: rgba(255, 255, 255, 0.13); */
}

.dark-glass.reflecting-glass {
    --color-0: rgba(160,160,160,0.45);
    --color-1: rgba(160,160,160,0.20);
    --color-2: rgba(160,160,160,0.08);
}