$web-masthead: true !default;
@if $web-masthead {

    // Masthead

    .masthead {

        // Appearance
        background-color: $masthead-background-color;
        border-bottom: $rule-thickness solid $masthead-border-color;
        color: $masthead-text-color;
        font-family: $font-text-secondary;
        text-align: $masthead-align;

        &:after {
            content: "";
            display: block;
            clear: both;
        }

        a {
            color: $masthead-text-color;
            text-decoration: none;
        }

        .masthead-logo {
            display: inline-block;
            margin-right: 0.5rem;
            margin-left: 0.5rem;
            max-height: $masthead-height;
            vertical-align: middle;

            // Default, then use variable
            width: 2.5rem;
            @if $masthead-logo-width {
                width: $masthead-logo-width;
            }

            @if $masthead-logo == false {
                display: none;
            }

            img {
                max-height: $masthead-height;
                max-width: 100%;
                vertical-align: middle;
            }

            svg {
                vertical-align: middle;
            }
        }

        ul {

            // Position
            display: inline-block;
            vertical-align: middle;

            // Appearance
            list-style-type: none;
            margin: 0 auto;
            padding: 0.5rem 0.5rem 0.5rem 0;
            text-align: left;

            // Keep masthead height when li is display:none
            min-height: $masthead-height;

            li {
                display: none; // hide masthead breadcrumbs as mobile-first default
                vertical-align: middle;

                @media only screen and (min-width: $break-width-small) {
                    align-items: center;
                    display: inline-flex;
                    margin: 0 0.25em 0 0;
                    min-height: $masthead-height - (0.5rem * 2);

                    // The divider between project and book title
                    // Should not show if there is only one work,
                    // and therefore no project title in masthead.
                    &:after {
                        content: $masthead-breadcrumb-divider;
                        color: $masthead-text-color;
                        margin-left: 0.5em;
                    }

                    // No symbol after last item
                    &:last-of-type:after {
                        content: normal;
                    }
                }
            }
        }
    } // .masthead
}
