@use 'mixins/breakpoints';
@use 'variables';

.dg-main {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: variables.$dg-navbar-height;
    bottom: 0;
    left: 0;
    right: 0;
}

.dg-scroll-container {
    overflow: auto;
}

.dg-layout {
    display: flex;
    flex-direction: column;
    flex: auto;
    .dg-sidebar {
        flex: 0 0 auto;
        width: 300px;
        overflow: auto;
        padding-top: 20px;
        border-right: 1px solid variables.$dg-gray-300;
        position: fixed;
        top: variables.$dg-navbar-height;
        bottom: 0;
    }

    .dg-doc-viewer {
        flex: auto;
        padding: 30px 50px 0 50px;
        margin-left: 300px;

        // 单个页面，没有频道，也就没有左侧菜单，间距为 0
        &--single {
            margin-left: 0px;
        }
    }

    .dg-doc-viewer-backdrop {
        position: absolute;
        transition:
            background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
            z-index 0s 0.4s;
        background-color: transparent;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    @include breakpoints.dg-media-breakpoint-down('md') {
        &.dg-sidebar-show {
            .dg-sidebar {
                display: block;
                left: 0;
                background: variables.$dg-gray-100;
            }

            .dg-doc-viewer-backdrop {
                transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
                background-color: rgba(0, 0, 0, 0.6);
                z-index: 1;
            }
        }

        .dg-sidebar {
            z-index: 2;
            transition:
                left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                background 0.4s;
            left: -300px;
        }

        .dg-doc-viewer {
            margin-left: 0px;
            padding: 20px 15px;
            position: relative;
        }
    }
}

.dg-mode-lite {
    .dg-main {
        top: 0;
    }
    .dg-layout {
        .dg-sidebar {
            background: variables.$dg-gray-100;
            top: 0;
        }
    }
}