.navbar {
    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
    height: 100vh;
    width: rem(300px);
    display: flex;
    flex-direction: column;
    border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
}

.wrapper {
    display: flex;
    flex: 1;
}

.aside {
    flex: 0 0 rem(60px);
    background-color: var(--mantine-color-body);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
}

.main {
    overflow-y: auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
}

.mainLink {
    margin-bottom: var(--mantine-spacing-sm);
    width: rem(44px);
    height: rem(44px);
    border-radius: var(--mantine-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));

    &:hover {
        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
    }

    &[data-active] {
        &,
        &:hover {
            background-color: var(--mantine-color-blue-light);
            color: var(--mantine-color-blue-light-color);
        }
    }
}

.stickyTitle {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--background-color);
}


.title {
    font-family: Greycliff CF,
    var(--mantine-font-family);
    margin-bottom: var(--mantine-spacing-md);
    background-color: var(--mantine-color-body);
    padding: var(--mantine-spacing-md);
    padding-top: rem(18px);
    height: rem(60px);
    border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
}

.logo {
    margin-bottom: var(--mantine-spacing-md);
    width: 3rem;
    display: flex;
    justify-content: center;
    padding-bottom: 4px;
    padding-top: 6px;
    border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
}

.link {
    display: block;
    text-decoration: none;
    border-top-right-radius: var(--mantine-radius-md);
    border-bottom-right-radius: var(--mantine-radius-md);
    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
    padding: 0 var(--mantine-spacing-md);
    font-size: var(--mantine-font-size-sm);
    margin-right: var(--mantine-spacing-md);
    margin-top: var(--mantine-spacing-sm);
    font-weight: 500;
    height: rem(44px);
    line-height: rem(44px);

    &:hover {
        background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
        color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
    }

    &[data-active] {
        &,
        &:hover {
            border-left-color: var(--mantine-color-blue-filled);
            background-color: var(--mantine-color-blue-filled);
            color: var(--mantine-color-white);
        }
    }
}

.sideBarBottomContent {
    width: 239px;
    position: fixed;
    bottom: 0;
    background-color: var(--mantine-color-gray-0);
    z-index: 10;
}
