$nav-width: 220px;
.docs {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 3rem 0;
    font-size: 0;
    max-width: 1100px;
}

@media (min-width: 1800px) {
    .docs {
        max-width: 1400px;
    }
}

.anchor {
    position: absolute;
    margin-top: -20px;
}

.navigation-header {
    display: block;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    padding: 10px;
    width: 100%;
    font-size: 0.75rem;
    line-height: 15px;
    background: rgba(255, 255, 255, 0.25);
    color: #000;
    .hamburger > div {
        background: #000;
    }
    &.affixed {
        background: transparentize($background-color, 0.1);
        color: #FFF;
        .hamburger > div {
            background: #FFF;
        }
    }
}

.hamburger {
    display: inline-block;
    vertical-align: -5px;
    width: 20px;
    height: 20px;
    padding: 4px 2px;
    & > div {
        width: 15px;
        height: 2px;
        margin-top: 3px;
    }
    .lettuce {
        margin-top: 0;
    }
}

@media (min-width: 768px) {
    .navigation-header {
        display: none;
    }
}

.navigation-pane {
    vertical-align: top;
    width: $nav-width;
    @media (min-width: 768px) {
        display: inline-block;
    }
}

@media (max-width: 767px) {
    .navigation-affix {
        padding: 4rem 1rem !important;
        background-color: $background-color;
        position: fixed;
        z-index: 999;
        top: 0;
        left: -$nav-width;
        transition: left 0.3s ease;
        &.mobile-nav {
            left: 0;
        }
    }
}

.navigation-affix {
    width: $nav-width;
    height: 100vh;
    overflow: auto;
    padding: 1rem;
    font-size: 1rem;
    &.affixed {
        position: fixed;
        z-index: 999;
        top: 0;
        padding: 4rem 1rem;
    }
}

.nav-title {
    font-size: 1.25em;
}

.nav-list {
    margin: 1rem 0;
    padding: 0;
    a {
        color: saturate(lighten($vue-dark, 60), 100);
        &:hover {
            color: $vue-light;
        }
    }
    li {
        display: block;
        margin: 0.5rem 1rem;
        height: 20px;
        &.is-active {
            position: relative;
            &:before {
                content: ' ';
                display: block;
                position: absolute;
                left: -15px;
                top: 4px;
                border-left: 7px solid $vue-light;
                border-top: 7px solid transparent;
                border-bottom: 7px solid transparent;
            }
        }
    }
}

.content-area {
    display: block;
    padding: 2rem 1rem;
    font-size: 1.05rem;
    line-height: 1.9em;
    h1 {
        padding-bottom: 1rem;
        border-bottom: 1px solid $vue-light;
        margin-bottom: 4rem;
        font-weight: 100;
    }
    h2 {
        margin-bottom: 2rem;
        font-weight: 300;
        color: saturate(lighten($vue-dark, 60), 100)
    }
    @media (min-width: 768px) {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - #{$nav-width});
        padding: 2rem;
    }
}

.doc-section {
    margin-bottom: 8rem;
}

.doc-example {
    margin-bottom: 8rem;
}