/*
Table of content
*/

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

@media (max-width: 62em) {
    .tocTextContainer {
        width: 100% !important;
    }
}

.tocLink {
    display: block;
    text-decoration: none;
    color: var(--mantine-color-text);
    line-height: 1.2;
    font-size: var(--mantine-font-size-sm);
    padding: var(--mantine-spacing-xs);
    border-top-right-radius: var(--mantine-radius-sm);
    border-bottom-right-radius: var(--mantine-radius-sm);
    border-left: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
}

.tocLink:hover {
    background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
}

.tocLinkActive {
    font-weight: 500;
    border-left-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
    color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
}

.tocLinkActive, .tocLinkActive:hover {
    background-color: var(--mantine-color-blue-light) !important;
}