$sidebarWidth: 280px;
$navbarHeight: 58px;

.app-layout {
    background: #EAEDF3;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;

    // sidebar style
    .app-sidebar {
        background: var(--bs-primary-dark);
        width: $sidebarWidth;
        height: 100%;

        .sidebar {
            padding: 24px 16px;
            display: flex;
            flex-direction: column;
            list-style: none;
            margin: 0;
            overflow-y: auto;
            height: calc(100% - 140px);

            @mixin sidebarItem {
                background: var(--bs-primary-dark);
                border-radius: 8px;
                display: flex;
                align-items: center;
                gap: 8px;
                color: white;
                text-decoration: none;
                transition: 0.3s ease-in-out;
                cursor: pointer;

                &:not(.title):hover {
                    background: var(--bs-primary);
                    color: var(--bs-secondary);
                }
            }

            &-item {
                @include sidebarItem;
                padding: 12px 16px;

                &.title {
                    cursor: unset;
                }

                @mixin activeItem {
                    background: var(--bs-primary);
                    color: #F2994A;
                }

                &.active {
                    @include activeItem;
                }

                i {
                    font-size: 18px;
                }

                &-child {
                    @include sidebarItem;
                    padding: 12px 42px;
                    color: rgba(255, 255, 255, 0.7);

                    &.active {
                        @include activeItem;
                    }
                }
            }
        }
    }

    // END sidebar style

    // body style
    .app-body {
        position: relative;
        width: calc(100% - $sidebarWidth);
        height: 100%;
        overflow-y: auto;

        // navbar style
        .app-navbar {
            width: 100%;
            height: $navbarHeight;
            position: sticky;
            top: 0;
            right: 0;
            background: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            column-gap: 16px;
            z-index: 10;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

            @mixin navbar-layout {
                height: 100%;
                display: flex;
                align-items: center;
                column-gap: 8px;
            }

            &-left {
                @include navbar-layout;
            }

            &-middle {
                @include navbar-layout;
            }

            &-right {
                @include navbar-layout;
            }
        }

        // END navbar style

        // content style
        .app-content {
            //height: calc(100% - $navbarHeight);
            width: 100%;
            padding: 20px 30px 40px;
        }

        // END content style
    }

    // END body style
}

/* width */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

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