$web-nav-bar: true !default;
$nav-bar-back-button-hide: false !default;
@if $web-nav-bar {

    // Navigation

    .nav-buttons {
        align-items: flex-end;
        display: flex;
        position: absolute;
        top: 0;
        margin: 0;

        @if $nav-position == "left" {
            left: 0;
        } @else {
            right: 0;
        }
    }

    .nav-back-button {
        font-family: $font-text-secondary;
        font-size: inherit;
        color: $nav-bar-label-color;
        background-color: $nav-bar-label-background-color;
        border: $rule-thickness solid $nav-bar-label-border-color;
        border-radius: $button-border-radius;
        padding: 0.25rem 0.5rem;
        cursor: pointer;
        margin: 0.5rem 0 0.5rem 0.5rem;

        @if $nav-bar-back-button-hide {
            display: none;
        }
    }

    [href="#nav"] {
        font-family: $nav-button-font;
        font-size: inherit;
        color: $nav-bar-label-color;
        background-color: $nav-bar-label-background-color;
        border: $rule-thickness solid $nav-bar-label-border-color;
        border-radius: $button-border-radius;
        padding: 0.25rem 0.5rem;
        text-decoration: none;
        margin: 0.5rem;

        .js-nav-open & {
            // Covers screen area, to let users click
            // anywhere on page to close nav bar
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
        }
    }

    // Reset position to fixed if $nav-bar-fixed: true
    $nav-bar-fixed: false !default;
    @if $nav-bar-fixed {

        .nav-buttons {
            position: fixed;
            z-index: 1; // less than .js-nav #nav
        }

        [href="#nav"] {
             .js-nav-open & {
                 z-index: inherit;
             }
         }
    }

    // Reset position to fixed if $nav-bar-fixed: true
    $nav-bar-fixed: false !default;
    @if $nav-bar-fixed {

        .visuallyhidden {
            // Override default position: absolute
            position: fixed;
        }
    }

    #nav {
        font-family: $nav-bar-font;
        font-size: $nav-bar-text-size;
        width: 100%;
        height: 100%;
        overflow-x: hidden; // hide horizontal scrollbar
        background-color: $nav-bar-background-color;
        border-top: $rule-thickness solid $nav-bar-border-color;

        .js-nav-open & {
            overflow-y: auto; // must let this div scroll
        }

        .js-nav & {
            border-top: none;
            border-right: $rule-thickness solid $nav-bar-border-color;
            max-width: $nav-bar-width;
            position: absolute;
            top: 0;

            @if $nav-position == "left" {
                left: 0;
            } @else {
                right: 0;
            }
        }

        // Reset position to fixed if $nav-bar-fixed: true
        $nav-bar-fixed: false !default;
        @if $nav-bar-fixed {

            .js-nav & {
                position: fixed;
                z-index: 2; // greater than [href="#nav"]
            }
        }

        // Search
        $search-enabled: true !default;
        @if $search-enabled {

            .search {
                background-color: $nav-bar-search-background-color;

                input {
                    width: 90%; // keep input within nav-bar bounds
                    padding: 0.75rem 1rem;
                    border: 0;
                    font-family: $font-text-secondary;
                    font-size: inherit;
                    overflow-x: hidden; // prevent scroll bar on very long searches
                    background-color: $nav-bar-search-background-color;
                }
            }
        } // if
        @else {

            .search {
                display: none;
            }
        } // else

        .nav-list {

            // First level parent navigation
            ol, ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                background-color: $nav-bar-parent-background-color;

                li {
                    padding: 0;
                    width: 100%; // use full width of li area
                    color: $nav-bar-parent-text-color;

                    a {
                        // Make link fill entire li area
                        display: inline-block;
                        width: 100%;
                        padding: 0 1.5rem 0 1rem; // space for open/close button
                        color: $nav-bar-parent-text-color;
                        text-decoration: none;

                        &:hover, &:focus, &:active {
                            color: inherit; // inherits from full-width, hover li
                        }
                    }

                    &:hover, &:focus, &:active { // Hovered, focused, tapped on touchscreen
                        color: $nav-bar-parent-text-hover-color;
                        background-color: $nav-bar-parent-hover-color;
                    }

                    &.active { // the active/current page
                        background-color: $nav-bar-child-hover-color;

                        a {
                            color: $nav-bar-child-text-color;
                        }

                        li {
                            a {
                                color: $nav-bar-child-text-color;
                            }
                        }
                    }
                } // li

                // Child navigation, after the parent, the rest of the nav-list
                ol, ul {

                    // Allow for optionally fixed nav bar
                    @if $nav-bar-item-collapse == true {
                        max-height: 0; // instead of display: none, because it works with transitions
                    } @else {
                        max-height: none;
                    }

                    transition: max-height 0.5s ease-out; // http://stackoverflow.com/a/8331169/1781075 for why max-height
                    background-color: $nav-bar-child-background-color;
                    overflow-x: hidden;
                    overflow-y: hidden;

                    li {

                        a {
                            // Make link fill entire li area
                            display: inline-block;
                            width: 100%;
                            color: $nav-bar-child-text-color;
                            padding-left: 2rem;

                            &:hover, &:focus, &:active {
                                color: inherit;
                            }
                        }

                        &:hover, &:focus, &:active {
                            color: $nav-bar-child-text-hover-color;
                            background-color: $nav-bar-child-hover-color;
                        }
                    } // li

                    // Sub-sub lists
                    ol, ul {
                        li {
                            a {
                                padding-left: 3rem;
                            }
                        } // li
                    } // ol, ul
                } // ol, ul

                // Show sublist when preceding (i.e. parent) li is hovered
                // and when the list contains the current page.
                // Allow for direct li + ol siblings (deprecated HTML nested-list structure)
                // and for direct li > ol children (correct HTML nested-list structure).
                li:hover + ol, li:active + ol, li:focus + ol,
                li:hover + ul, li:active + ul, li:focus + ul,
                li:hover > ol, li:active > ol, li:focus > ol,
                li:hover > ul, li:active > ul, li:focus > ul,
                ol.active, ul.active {
                    height: auto;
                    transition: max-height 1s ease-in;

                    // Bigger than it will ever be, for transition to work.
                    // See http://stackoverflow.com/a/8331169/1781075
                    max-height: 500em;
                }

                ol:hover, ul:hover, ol:active, ul:active, ol:focus, ul:focus,
                ol.active, ul.active {
                    height: auto; // keep sublist visible once it's visible
                    max-height: 500em; // match max-height above
                }
            } // ol, ul
        } // .nav-list

        .nav-title {
            color: $nav-bar-title-color;
            font-size: $font-size-default;
            font-weight: bold;
            line-height: $line-height-default * 0.8;
            padding: 0 1rem;

            // Space on right for close button
            margin: 1rem 3rem 1rem 0;

            a {
                color: $nav-bar-title-color;
                text-decoration: none;
            }
        }

    } // #nav

    .has-children {
        position: relative;
    }

    [data-toggle] {
        position: absolute;
        top: 0;
        right: 0;
        background-color: transparent;
        border: none;
        color: initial;
        font-size: 1em;
        padding: 0.333em 0.5em; // centers expand buttons vertically
        margin: 0 0 0 -0.5rem;
        height: 1em;

        &:focus {
            outline: none;
        }

        &:hover {

            cursor: pointer;
            background-color: transparent;
        }

        &:after {
            color: $nav-bar-close-color;
        }

        &.show-children {
            &:after {
                color: $nav-bar-children-prompt-color;
            }
        }
    }

    [data-nav-close] {
        background-color: transparent;
        font-size: $font-size-default * $font-size-bigger;

        &:after {
            content: $nav-bar-close;
        }

        &:hover {
            background-color: transparent;
        }
    }

    [data-toggle-nav] {
        background-color: transparent;
        color: initial;
        display: inline-flex;
        font-size: 1em;
        height: 100%;
        padding: 0.5em;
        right: 0;

        &:after {
            color: $nav-bar-children-prompt-color;
            content: $nav-bar-children-prompt;
        }

        &.show-children {

            &:after {
                content: $nav-bar-children-prompt-hide;
            }
        }

        &:hover {
            background-color: transparent;
        }
    }

    // If link does not link to a file,
    // appear as a link to expand children.
    .no-file.has-children {
        cursor: pointer;
    }

}
