.nav, .footer-nav {
    min-width: 330px;

    background-color:                       var(--background-sidebar);
}

.nav-link {
    display:                                flex;
    justify-content:                        left;
    align-items:                            center;

    color:                                  inherit;
    text-decoration:                        none;

    width: 320px;
    min-width:                              60px;
    height:                                 65px;
    cursor:                                 pointer;

    gap:                                    15px;
    padding-left:                           10px;   
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-link.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.nav-link:hover {
    background-color:                       var(--background-sidebar-item-hover);
}

.nav-link--selected {
    background-color:                       var(--background-sidebar-item-select);
    /* cursor: default; */
}

.nav-link--selected:hover {
    background-color:                       var(--background-sidebar-item-select);
}

.nav-icon {
    width: 40px;
    height: 40px;
}

.light-theme .nav-icon--public {
    background-color: #333 !important;
}

.dark-theme .nav-icon--public {
    background-color: #FFF !important;
}

.light-theme .nav-icon--private {
    background-color: #990000 !important;
}

.dark-theme .nav-icon--private {
    background-color: #FF9999 !important;
}

.nav-icon--sidebar {
    -webkit-mask: var(--icon-url) no-repeat center;
    -webkit-mask-size: contain;

    mask: var(--icon-url) no-repeat center;
    mask-size: contain;
}


.nav-preload {
    display:                                flex;
    justify-content:                        right;
    align-items:                            center;
}

.nav-item {
    /* flex:                                    1; */

    display:                                flex;
    justify-content:                        left;
    align-items:                            center;

    font-size:                              16px;
    font-weight:                            bold;

    list-style:                             unset;
}

.light-theme .nav-item--public {
    color: #333 !important;
}

.dark-theme .nav-item--public {
    color: #FFF !important;
}

.light-theme .nav-item--private {
    color: #990000 !important;
}

.dark-theme .nav-item--private {
    color: #FF9999 !important;
}


/* NAV-LINK SKELETON */
.nav-link--skeleton {
    pointer-events: none;
    cursor: default;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.nav-link--skeleton.fade-out {
    opacity: 0;
}

.nav-icon--skeleton,
.nav-item--skeleton {
    position: relative;
    overflow: hidden;
    /* background: var(--skeleton-bg, #2a2a2a); */
    border-radius: 6px;
}

.light-theme .nav-icon--skeleton,
.light-theme .nav-item--skeleton {
    background: #c4d3df;
}

.dark-theme .nav-icon--skeleton,
.dark-theme .nav-item--skeleton {
    background: #31314a;
}

.nav-icon--skeleton {
    width: 22px;
    height: 22px;
    margin-bottom: 6px;
}

.nav-item--skeleton {
    width: 80%;
    height: 14px;
}

/* shimmer */
.light-theme .nav-icon--skeleton::before,
.light-theme .nav-item--skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.7),
        transparent
    );
    animation: shimmer 1.1s infinite;
}

.dark-theme .nav-icon--skeleton::before,
.dark-theme .nav-item--skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.15),
        transparent
    );
    animation: shimmer 1.3s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}


@media (max-width: 1490px) {
    .nav, .footer-nav {
        flex-basis: unset !important;
        min-width: 60px !important;
        max-width: 60px !important;
        padding: 0px !important;
        margin: 0px !important;
    }

    .nav-link {
        justify-content: center !important;
        min-width: 60px !important;
        max-width: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 0px !important;
        margin-bottom: 10px;
    }

    .nav-icon {
        min-width: 35px !important;
        min-height: 35px !important;
        max-width: 35px !important;
        max-height: 35px !important;
    }

    .nav-item {
        display: none !important;
    }

    .nav-preload {
        display: none !important;
    }
}