@supports (backdrop-filter: blur($glass-blur)) {
    .hamburger-menu .bg {
        backdrop-filter: blur($glass-blur);
        background-color: transparent !important;
    }

    @include media-breakpoint-up('lg', $grid-breakpoints) {
        header {
            backdrop-filter: blur($glass-blur);
            background-color: transparent !important;
        }
    }

    dialog::backdrop, .modal, .cc-modal-bg {
        backdrop-filter: blur($glass-blur);
        background-color: rgba($black, .2) !important;
    }

    //.modal-content {
    //    backdrop-filter: blur($glass-blur) brightness(200%);
    //    background-color: transparent !important;
    //}
    //}

    // disabled until we can use Vue3 teleport
    //.dropdown-menu {
    //    backdrop-filter: blur($glass-blur);
    //    background-color: transparent !important;
    //}

    details {
        backdrop-filter: blur($glass-blur-sm);
        background-color: transparent !important;
    }

    .btn-group {
        backdrop-filter: blur($glass-blur-sm);
    }

    .content-warning {
        backdrop-filter: blur($glass-blur);
        background-color: transparent !important;
    }
}

//.input-group, .btn-group, .btn-group-vertical {
//    @extend .shadow;
//}