/* ==========================================================================
   Glass Effect Utilities
   ========================================================================== */

.glass-effect{
    transition: 0.2s ease;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

a.glass-effect:hover{
    background: rgba(245, 245, 248, 0.20);
    border: 1px solid var(--sa-border-bold);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.10);
}

a.glass-effect:active{
    background: rgba(238, 239, 243, 0.20);
    box-shadow: none;
}

.glass-effect-inverse{
    transition: 0.2s ease;
    background: rgba(47, 47, 66, 0.20);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

a.glass-effect-inverse:hover{
    background: rgba(106, 106, 126, 0.20);
    border: 1px solid var(--sa-border-inverse);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.10);
}

a.glass-effect-inverse:active{
    background: rgba(34, 34, 54, 0.20);
    box-shadow: none;
}