@require 'variables'

.sidebar {
    position: absolute
    left: 0
    top: 0
    bottom: 0
    width: $sidebar-width
    overflow-y: auto
    padding: 10px 10px
    font-size: 0.875em
    box-sizing: border-box
    -webkit-overflow-scrolling: touch

    // Animation: slide away
    transition: left 0.5s

    @media only screen and (max-width: 1060px) {
        left: -$sidebar-width
    }
}

.sidebar-hidden .sidebar {
    left: - $sidebar-width
}

.sidebar-visible . sidebar {
    left: 0
}

.chapter {
    list-style: none outside none
    padding-left: 0
    line-height: 1.9em

    li a {
        padding: 5px 0
        text-decoration: none

        &:hover { text-decoration: none }
    }

    .spacer {
        width: 100%
        height: 3px
        margin: 10px 0px
    }
}

.section {
    list-style: none outside none
    padding-left: 20px
    line-height: 2.5em

    li {
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
    }
}