/* Sidebar Scroll styles */
nav::-webkit-scrollbar {
    width: 8px;
}

nav::-webkit-scrollbar-track {
    background: var(--menu-bg-color);
}

nav::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

nav::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.admin-sidebar {
    .nav-item {
        .nav-link {
            color: var(--menu-prime-color);
        }
        .activeNavItem {
            color: var(--menu-prime-color);
        }
        .nav-link:hover {
            color: var(--menu-active-color);
            border-color: transparent;
            background-color: var(--amx-primary-color); // lightslategrey; //#ffffff0d //alternate
            font-weight: 600;
            border-radius: 0.5rem;
        }
        .nav-link:focus {
            color: var(--menu-active-color);
            border-color: transparent;
        }
        .isActive {
            color: var(--menu-active-color);
            border-color: transparent;
            background-color: var(--amx-primary-color); //lightslategrey; //#ffffff0d //alternate
            font-weight: 600;
            border-radius: 0.5rem;
        }
    }
}

.navbar-brand {
    border-block-end: 1px solid var(--menu-prime-color);
}

#navbar-main {
    max-width: 100%;
    height: 3.75rem;
    z-index: 100;
    background: var(--header-bg);
    border-block-end: 1px solid var(--header-border-color);
    transition: all 0.1s ease;
}

.user-header {
    color: var(--header-prime-color);
}

#navbar-main {
    position: sticky;
    top: 0;
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .media {
        p {
            font-size: 0.775rem !important;
        }
        span {
            font-size: 0.613rem;
        }
    }
}

.dropdown-menu-arrow {
    transform: translate3d(0px, 62px, 0px) !important;
}

.footer {
    padding: 1.5rem;
    display: flex;
    justify-content: center;
}

.content-wrapper {
    .container-fluid {
        padding-right: 1.5rem !important;
        padding-left: 0.8rem !important;
    }
}

.admin-breadcrumbs {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    margin-bottom: 0.5rem;

    p {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--header-prime-color);
    }

    .breadcrumbs {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        i {
            font-size: 0.6rem;
        }
        a {
            color: var(--amx-primary-color);
        }
        a:nth-last-child(1) {
            color: var(--header-prime-color);
            font-weight: 600;
        }
    }
}

.navbar-header {
    display: flex;
    align-items: center;
}

.admin-navbar-toggler {
    color: var(--menu-bg);
    font-size: 1.5rem;
    cursor: pointer;
}

.sidebar-toggler {
    color: var(--menu-prime-color);
    font-size: 1.5rem;
    cursor: pointer;
}

#navbar-closed-logo {
    display: none;
    max-width: 3rem;
    margin-left: -1rem;
}

.navbar-closed {
    width: 90px !important;
    transition: width 0.2s;
    z-index: 200;

    .nav-menu-icon {
        display: none;
    }
    .nav-name {
        display: none;
    }
    .sub-menu-wrapper {
        display: none;
    }
    .navbar-brand {
        border-block-end: none;
    }
    #navbar-closed-logo {
        display: block;
    }

    .navbar-brand-img{
        display: none;
    }

    //transitions on navbar hover
    &:hover {
        width: 250px !important;
        transition: width 0.2s;

        #navbar-closed-logo {
            display: none;
        }

        .navbar-brand-img {
            display: block;
        }

        .nav-menu-icon {
            display: block;
        }

        .nav-name {
            display: block;
        }
        .sub-menu-wrapper {
            display: block;
        }
        .navbar-brand {
            border-block-end: 1px solid var(--menu-prime-color);;
        }
        .isActive {
            all: none;
        }
    }
}

.expand-main-content {
    //when the sidebar is expanded the transition is not proper ease-in, maybe?
    margin-left: 90px !important;
}

.main-content {
    //transitions when the toggle icons are clicked
    transition: margin-left 0.2s;
    z-index: 100;
}

.navbar-menu-icon {
    width: 1.5rem;
}

.navbar-menu-icon:hover {
    cursor: pointer;
}