@import "../_old/variables";
@import "../new-variables";
@import "sidebar";
@import "footer";
@import "main-header";

$header-height: 70px;


body {
    height: 100vh;
    overflow: hidden;
    background: $body-bg;

}

#main-layout {
    overflow: auto;
    height: 100%;

    &::-webkit-scrollbar {

        width: 10px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        height: calc(100% - 36px);
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
        background: #888;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    display: grid;
    flex: 1;
    grid-template-columns: 260px calc(100% - 260px);
    grid-template-rows: 1fr;
    grid-template-areas:
        "sidebar content";


    .layout-sidebar {
        grid-area: sidebar;
        height: calc(100% - 36px);
        width: 100%;
    }

    .layout-content {
        grid-area: content;
        height: 100%;
        width: 100%;


        .main-header {
            padding: 0 70px;
            width: 100%;
            height: $header-height;
        }

        .main-content {
            padding: 40px 70px;
            overflow: scroll;
            //height: 100%;
            max-height: calc(100vh - #{$footer-height} - #{$header-height});
            height: calc(100vh - #{$footer-height} - #{$header-height});


            &::-webkit-scrollbar {
                width: 10px;
                height: 10px;
            }

            /* Track */
            &::-webkit-scrollbar-track {
                background: #f1f1f1;
            }

            /* Handle */
            &::-webkit-scrollbar-thumb {
                background: #888;
            }

            /* Handle on hover */
            &::-webkit-scrollbar-thumb:hover {
                background: #555;
            }
        }


    }


}

.backdrop-loader {
    // height: 100%;
    // width: 100%;
    // background: rgba(0, 0, 0, 0.4);
    // position: fixed;
    // left: 0;
    // top: 0;
    // z-index: 999999;
    width: 330px;
    height: 180px;
    border: none;
    border-radius: 5px;

    &::backdrop {
        background-color: $modal-overlay;
        opacity: 32%;

    }

    .loader-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3rem 5rem;
        background-color: #f8fafc;
        gap: 1.5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;

        p {
            font-weight: bold;
            font-size: 1.6rem;
            color: #040059;
        }

        .loader {
            border: 8px solid #91C2D4;
            border-radius: 50%;
            border-top: 10px solid #040059;
            border-bottom: 10px solid #040059;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    }
}

.error-bug {
    border: 1px solid #ee6969;
    background: #ee696966;
    list-style: none;
    padding: 15px;
    margin-bottom: 15px;

    li{
        margin: 5px 0;
        font-size: 16px;
    }
}