:root {
    --sidebar-width: 250px;
    --sidebar-translate: calc(0px - var(--sidebar-width));
    --sidebar-logo-height: 56px;
}

.nav-sidebar-bg {
    background-color: var(--bg-dark-1);
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nav-sidebar {
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    background-color: var(--bg-dark-acrylic-1);
    height: calc(100% - var(--header-height));
}

.nav-sidebar-logo {
    width: 100%;
    height: 56px;
    background-color: transparent;
    color: var(--fg-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-sidebar-logo-text {
    padding-left: 10px;
}

.nav-sidebar-link {
    border-left: 4px solid transparent;
    background-color: transparent;
}

    .nav-sidebar-link.active, .nav-sidebar-link:focus {
        background-color: var(--bg-light-acrylic-2);
        border-left: 4px solid;
        border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, var(--fg-accent) 25%, var(--fg-accent) 75%, rgba(0,0,0,0) 75%);
        border-image-slice: 1;
    }

    .nav-sidebar-link:hover {
        background-color: var(--bg-light-acrylic-2);
    }

.nav-sidebar-item {
    color: var(--fg-acrylic-2);
}

.nav-sidebar-settings-container {
    width: 100%;
    position: absolute;
    bottom: 0;
    background: var(--bg-dark-1);
}

.nav-sidebar-settings-link {
    width: 100%;
    bottom: 0;
    margin-bottom: var(--sidebar-logo-height);
}

.nav-sidebar-icon {
    width: 15px;
    text-align: center;
    color: var(--fg-acrylic-2);
    float: right;
}

/* width */
.nav-sidebar ::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.nav-sidebar ::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
.nav-sidebar ::-webkit-scrollbar-thumb {
    background: var(--fg-accent);
}

    /* Handle on hover */
    .nav-sidebar ::-webkit-scrollbar-thumb:hover {
        background: var(--fg-accent);
    }