.backdrop-overlay {
    display: none;
}

@media screen and (max-width: 992px) {
    .backdrop-overlay {
        position: absolute !important;
        display: none;
        width: 100vw;
        height: calc(100vh - 56px);
        background: rgba(0, 0, 0, 0.08);
        z-index: 10;
    }

    .editor-sidebar {
        border-top: none;
        z-index: 100;
    }

    .editor-navbar {
        border-bottom: 1px solid #ddd;
    }

    .editor-sidebar-panels {
        position: absolute;
        left: 100px;
        z-index: 9999;
        height: calc(100vh - 56px);
        padding-block: 0;
        border-radius: 0;
    }

    .editor-sidebar-panels .single-panel {
        border: none;
        box-shadow: none;
        border-radius: 0;
        border-left: 1px solid #ddd;
    }

    .editor-sidebar-panels .single-panel {
        display: flex !important;
        position: absolute;
        top: 0px;
        left: -400px;
        width: 100%;
        transition: 0.2s ease-in-out;
        opacity: 0;
    }

    .editor-sidebar-panels .single-panel.active {
        background: white;
        left: 0px;
        opacity: 1;
    }

    .editor-sidebar-panels:has(.single-panel.active)~.backdrop-overlay {
        display: block;
    }
}

@media screen and (max-width:768px) {
    .editor-wraper {
        flex-direction: column-reverse;
    }

    .sidebar-wraper {
        position: absolute;
        top: 56px;
        height: calc(100vh - 56px);
    }

    .canvas-area {
        padding-bottom: calc(50px + 100px);
    }

    .editor-sidebar {
        flex-direction: row;
        width: 100vw !important;
        z-index: 99999;
        position: absolute;
        height: 100px;
        bottom: 0px;
        padding-block: 0px;
        max-height: 100px;
    }

    .editor-sidebar .items {
        flex-direction: row;
        width: 100%;
    }

    .editor-sidebar .tool-item {
        min-width: 105px;
    }

    .editor-sidebar-panels {
        left: 0px;
    }
}