@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;

@mixin msk-dashboard {
    $msk--header-height: 64px;

    .msk-dashboard--dashboard {
        height: 100vh;
        width: 100vw;

        /* ----------------------------------------------
        //  fixed Header
        // --------------------------------------------- */
        &.msk-dashboard--fixed-header {
            padding-top: m.msk-rem($msk--header-height);
        }

        /* ----------------------------------------------
        //  Sidebar setup
        // --------------------------------------------- */
        .msk-dashboard--content-with-sidebar {
            display: grid;
            grid-template-columns: 1fr;
            height: 100%;
            overflow: auto;

            @media (width >= 1024px) {
                grid-template-columns: auto 1fr;
            }

            .msk-dashboard--content__side {
                overflow: auto;
            }

            .msk-dashboard--content__main {
                overflow: auto;
            }
        }
    }
}

@mixin msk-dashboard-layout-sidebar {
    .msk-dashboard-layout {
        display: grid;
        grid-template-areas:
            'header header'
            'sidebar content';
        grid-template-rows: auto 1fr;
        grid-template-columns: auto 1fr;
        height: 100vh;
        width: 100vw;
        overflow: auto;
        position: relative;

        .msk-header {
            grid-area: header;
        }
    }

    .msk-dashboard-layout--sidebar {
        position: absolute;
        left: 0;
        bottom: 0;
        top: 0;
        background-color: tk.$msk--color-bg;
        overflow: auto;
        transition: all 0.3s ease-in-out;
        box-shadow: inset -2px 0 tk.$msk--color-border-weak;
        z-index: 999;

        &.msk-dashboard-sidebar--collapsed {
            overflow: hidden;

            .msk-dashboard-sidebar--content {
                opacity: 0;
                pointer-events: none;
            }
        }

        &.msk-dashboard-sidebar--expanded {
            .msk-dashboard-sidebar--content {
                opacity: 1;
                pointer-events: all;
            }
        }

        @media (max-width: 767px) {
            &.msk-dashboard-sidebar--expanded {
                width: 100vw !important;
            }
        }

        .msk-dashboard-sidebar--toggle-button {
            position: absolute;
            right: 2px;
            top: 0;
            z-index: 999;
        }

        .msk-dashboard-sidebar--content {
            transition: opacity 0.3s ease-in-out;
        }
    }

    .msk-dashboard-layout--content {
        grid-area: content;
        padding: 0.5rem 0rem 0rem 1rem;
        box-sizing: border-box;
        overflow: auto;
    }

    .msk-dashboard-layout--sidebar-hidden {
        transition: all 0.3s ease-in-out;
        opacity: 0;
        pointer-events: none;
    }

    .msk-dashboard-layout--sidebar-container {
        position: relative;
    }
}