.w4c-sidebar__overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.w4c-sidebar.is-open .w4c-sidebar__overlay {
    opacity: var(--w4c-sidebar-overlay-opacity, .5);
    visibility: visible;
}

.w4c-sidebar__panel {
    position: fixed;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    background-color: var(--w4c-sidebar-bg, #fff);
    box-shadow: 0 0 24px rgba(0, 0, 0, .15);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
}

.w4c-sidebar.is-open .w4c-sidebar__panel {
    transform: translate(0, 0);
    visibility: visible;
}

.w4c-sidebar__close {
    align-self: flex-end;
    margin: 8px;
    padding: 4px 10px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.w4c-sidebar__close:hover,
.w4c-sidebar__close:focus {
    border: 0;
    background: transparent;
    opacity: .6;
}

.w4c-sidebar__content {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
}

body.w4c-sidebar-locked {
    overflow: hidden;
}

@media (min-width: 768px) {
    .w4c-sidebar__panel {
        top: 0;
        bottom: 0;
        width: 360px;
        max-width: 90vw;
    }

    .w4c-sidebar--desktop-left .w4c-sidebar__panel {
        left: 0;
        transform: translateX(-100%);
    }

    .w4c-sidebar--desktop-right .w4c-sidebar__panel {
        right: 0;
        transform: translateX(100%);
    }
}

@media (max-width: 767px) {
    .w4c-sidebar--mobile-left .w4c-sidebar__panel,
    .w4c-sidebar--mobile-right .w4c-sidebar__panel {
        top: 0;
        bottom: 0;
        width: 85vw;
        max-width: 360px;
    }

    .w4c-sidebar--mobile-left .w4c-sidebar__panel {
        left: 0;
        transform: translateX(-100%);
    }

    .w4c-sidebar--mobile-right .w4c-sidebar__panel {
        right: 0;
        transform: translateX(100%);
    }

    .w4c-sidebar--mobile-bottom .w4c-sidebar__panel {
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 85vh;
        border-radius: 12px 12px 0 0;
        transform: translateY(100%);
    }
}