.navbar {
    height: 100%;
    padding: var(--mantine-spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    @mixin dark {
        background-color: var(--mantine-color-body);
        box-shadow: 0 2px 4px var(--mantine-color-dark-7), 0 4px 24px var(--mantine-color-dark-7);
    }
    @mixin light {
        background-color: #f9f9f9;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 24px rgba(0, 0, 0, .08);
    }
    border-radius: rem(20);
    width: 100%;
    justify-content: space-between;
}

.navbarMain {
    width: 100%;
}

.link {
    //width: rem(50px);
    width: 100%;
    height: rem(50px);
    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);
        }
    }
}