@import (optional) "../../node_modules/dotsunited-equal-height-blocks/lib/mixins";

@hdeng-toc-link-color: #ccc;
@hdeng-toc-bg-contrast-color: @hdeng-header-bg-contrast-color;

.hdeng-toc-critical-generate() {
    // Silence
}

.hdeng-toc-generate() {
    .toc {
        .hdeng-clearfix();
        .dotsunited-equal-height-blocks-container();
        background: @hdeng-body-bg-nuance-color;
        border-top: 1px solid @hdeng-header-bg-contrast-color;
        border-bottom: 1px solid @hdeng-header-bg-contrast-color;
        padding: @hdeng-spacing (@hdeng-spacing + floor(@hdeng-spacing / 2)) (@hdeng-spacing - floor(@hdeng-spacing / 2));
        margin: 0 0 @hdeng-spacing;

        li {
            float: left;

            padding: 0 (@hdeng-spacing * 2) 0 0;
            margin: 0 0 @hdeng-spacing/2 0;
            width: 100% / 3;

            @media (max-width: @hdeng-breakpoint-default) {
                width: 50%;
            }

            @media (max-width: @hdeng-breakpoint-mobile) {
                width: 100%;
                float: none;
            }
        }

        a {
            color: @hdeng-toc-link-color;
            text-decoration: underline;

            &:visited {
                color: @hdeng-toc-link-color;
            }

            &:hover {
                color: @hdeng-link-color;
            }
        }
    }

    .toc--fullwidth {
        li {
            float: none;
            width: 100%;
        }
    }

    .toc--half {
        li {
            width: 50%;;

            @media (max-width: @hdeng-breakpoint-mobile) {
                width: 100%;
                float: none;
            }
        }
    }
}
