/**
 * This file provides the design styles for the sitetools (nav).
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */


.side-tools.main-sidebar {
    @icon-size: 2rem;

    counter-increment: bar-counter;

    > nav {
        > ul {
            padding-bottom: .4rem;
            margin-bottom: 0;
        }
    }

    h6 {
        position: relative;
        width: auto;
        height: auto;
        color: @color-nav;
        font-weight: normal;
        padding: .5em 0 .5em (@icon-size + 1.1);

        &::before {
            content: counter(bar-counter, lower-alpha);
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            justify-content: center;
            -webkit-justify-content: center;
            height: 100%;
            width: @icon-size;
            overflow: hidden;
            text-align: center;
            margin-top: auto;
            margin-bottom: auto;
        }

        &::after {
            content: '';
            position: absolute;
            top: 15%;
            bottom: 15%;
            width: 1px;
            left: (@icon-size + .6);
            background-color: @color-border;
            transition: @transition background-color;
        }

        + ul {
            margin-top: .5em;
            margin-bottom: .25em;
        }
    }


/* + + +  linklist  + + + */
    ul,
    .trace {
        padding-left: (@icon-size + .5);
    }

    ul {
        border-bottom: 1px solid @color-border;
    }

    p {
        max-height: 200px;
        overflow-y: auto;
        background-color: @background_page-header;
        border: 1px solid @color-border;
        padding: .4rem;

        .bchead,
        .bcsep {
            display: none;
        }

        .breadcrumbs {
            padding: 0;
            margin: 0;
        }

        bdi {
            display: block;
            line-height: 125%;
            padding: .1rem 0;
        }

        a {
            cursor: pointer;
        }
    }

    li {
        list-style-type: none;

        a {
            display: list-item;
            list-style-type: square;
            color: @color-nav;
            padding-top: .1em;
            padding-bottom: .1em;
            transition: @transition color;

            &:hover,
            &:focus,
            &:active {
                color: @button_background;
            }
        }

        &:first-of-type {
            padding-top: .3em;
        }
    }
}


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* min-width: 1440px */

@media @screen_min-xlg {
    .side-tools.main-sidebar {
        h6 {
            font-size: .9rem;

            * {
                font-size: inherit;
            }
        }

        li {
            font-size: 100%;
            padding-top: .1em;
            padding-bottom: .1em;

            > * {
                font-size: .8rem;
            }
        }
    }
}


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1439px */

@media @screen_max-xlg {
    .side-tools.main-sidebar {
        h6 {
            font-size: 1rem;
        }

        li {
            font-size: 1rem;
            padding: .15em .25rem;

            > * {
                font-size: 1rem;
            }
        }
    }
}