html.default
    +size-md
        .col-content
            width: 72%

        .col-menu
            width: 28%

        .tsd-navigation
            padding-left: 10px

    +size-xs-sm
        .col-content
            float: none
            width: 100%

        .col-menu
            position: fixed !important
            overflow: auto
            -webkit-overflow-scrolling: touch
            overflow-scrolling: touch
            z-index: 1024
            top: 0 !important
            bottom: 0 !important
            left: auto !important
            right: 0 !important
            width: 100%
            padding: 20px 20px 0 0
            max-width: 450px
            visibility: hidden
            background-color: $COLOR_PANEL
            transform: translate(100%,0)

            > *:last-child
                padding-bottom: 20px

        .overlay
            content: ''
            display: block
            position: fixed
            z-index: 1023
            top: 0
            left: 0
            right: 0
            bottom: 0
            background-color: rgba(#000, 0.75)
            visibility: hidden

        &.to-has-menu
            .overlay
                animation: fade-in 0.4s

            header,
            footer,
            .col-content
                animation: shift-to-left 0.4s

            .col-menu
                animation: pop-in-from-right 0.4s

        &.from-has-menu
            .overlay
                animation: fade-out 0.4s

            header,
            footer,
            .col-content
                animation: unshift-to-left 0.4s

            .col-menu
                animation: pop-out-to-right 0.4s

        &.has-menu
            body
                overflow: hidden

            .overlay
                visibility: visible

            header,
            footer,
            .col-content
                transform: translate(-25%, 0)

            .col-menu
                visibility: visible
                transform: translate(0,0)

.tsd-page-title
    padding: 30px 0 20px 0
    margin: 0 0 40px 0
    background: $COLOR_PANEL
    box-shadow: 0 1px 5px rgba(#000, 0.35)

    h1
        margin: 0

.tsd-breadcrumb
    margin: 0
    padding: 0
    color: $COLOR_TEXT_ASIDE

    a
        color: $COLOR_TEXT_ASIDE
        text-decoration: none

        &:hover
            text-decoration: underline

    li
        display: inline

        &:after
            content: ' / '
