// sidebar blurred avatar background
//
// if backdrop-filter is supported,
// set the user avatar (if any) as a background so
// it can be blurred by the tag panel and room list

@supports (backdrop-filter: none) {
    .mx_LeftPanel2 {
        background-image: var(--avatar-url);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left top;
    }

    .mx_TagPanel {
        backdrop-filter: blur(100px);
    }

    .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer {
        backdrop-filter: blur(175px);
    }

    // sticky headers need their own blur, and their own background to make it opaque
    .mx_RoomSublist2_headerContainer_sticky {
        background-size: cover;
        background-image: var(--avatar-url);
        background-position: center;
    }
}

/* outside of @supports as the backdrop-filter will be ignored, and we still apply the mostly-opaque background color */
.mx_RoomSublist2_headerContainer_sticky .mx_RoomSublist2_stickyHeaderBlur {
    backdrop-filter: blur(100px);
    background-color: $roomlist2-bg-color;
}

.mx_RoomSublist2_showNButton {
    background-color: transparent !important;
}