$notificationsBg: #CF1322;
.account-masthead {
    @extend .clearfix;
    min-height: 30px;
    color: $mastheadTextColor;
    background: $gray-100;
    .account {
        float: right;
        ul {
            display: inline-flex;
            align-items: baseline;
            flex-wrap: wrap;
            li {
                display: block;
                float: left;
                padding: .5rem 0;
                a, button {
                    display: block;
                    text-decoration: none;
                    @include border-radius(8px);
                    font-size: 14px;
                    padding: 6px 10px;
                    margin-left: .5rem;
                    span.username,
                    span.text {
                        margin: 0 2px 0 4px;
                    }
                    span.text {
                        position: absolute;
                        top: -9999px;
                        left: -9999px;
                    }
                    &:hover {
                        color: $white;
                        background-color: darken($primary, 15%);
                        text-decoration: none;
                    }
                    &.sub {
                        font-weight: 300;
                    }
                }
                a.image {
                    background-color: $white;
                    color: $black;
                    border: 1px solid #d0d5dd;
                    &:hover {
                        background-color: darken($white, 15%);
                    }
                }
            }
        }
        .notifications {
            a {
                span.badge {
                    font-size: 12px;
                    margin-left: 3px;
                    padding: 1px 6px;
                    background-color: darken($mastheadBackgroundColor, 15%);
                    @include border-radius(4px);
                    text-shadow: none;
                    color: mix($mastheadBackgroundColor, $mastheadLinkColor, 25%);
                }
                &:hover span {
                    color: $mastheadLinkColor;
                    background-color: darken($mastheadBackgroundColor, 20%);
                }
            }
            &.notifications-important a {
                span.badge {
                    color: $white;
                    border: 1px solid $notificationsBg;
                    background-color: $notificationsBg;
                }
            }
        }
        &.authed {
            .image {
                img {
                    @include border-radius(4px);
                }
            }
        }
    }
}

.masthead {
    background: $mastheadBackgroundColor;
    border-bottom: $gray-300 1px solid;
    @extend .p-2;
    .debug {
        position: fixed;
        top: 0;
        left: 0;
        color: $gray-800;
        background-color: opacify($color: $primary, $amount: 0.3);
        padding: 2px 4px;
        border: $gray-300 1px solid;
        border-left: 0px;
        z-index: 9;
    }
    .navbar {
        hgroup {
            h1,
            h2 {
                float: left;
                font-size: 30px;
                line-height: 1.5;
            }
            h1 {
                font-weight: 900;
                letter-spacing: -1px;
                margin: 3px 0;
            }
            h2 {
                position: absolute;
                bottom: -3px;
                left: 0;
                margin: 0;
                font-size: 15px;
                font-weight: normal;
                line-height: 1.2;
                white-space: nowrap;
            }
        }
        .logo {
            display: inline-block;
            img {
                max-height: $logoMaxHeight;
                min-height: $logoMinHeight;
                vertical-align: unset;
            }
        }
    }
    .main-navbar {
        ul {
            justify-content: center;
            flex-wrap: wrap;
            padding: 10px 0;
            @include media-breakpoint-up(lg){
                gap: 24px
            }
            li {
                margin-right: 2px;
                a {
                    padding: ($spacer * .6)  ($spacer * .9);
                    color: $black;
                    text-decoration: none;
                    margin-bottom: $spacer-1;
                }
                &:hover,
                &:focus,
                &.active {
                    a {
                        border-radius: $border-radius-sm;
                        background-color: $brand-100;
                        color: $brand-900;
                    }
                }
                &.active {
                    a {
                        font-weight: $font-weight-semibold;
                    }
                }
            }
        }
    }
    .login {
        display: flex;
        justify-content: flex-end;
    }
}

@include media-breakpoint-down(lg) {
    .masthead {
        .main-navbar {
            ul {
                padding: 20px 0 0;
                li {
                    padding: 0;
                    a {
                        display: block;
                        padding: $nav-link-padding-y $nav-link-padding-x;
                        @include font-size($nav-link-font-size);
                        font-weight: $nav-link-font-weight;
                        color: $brand-900;
                        text-decoration: if($link-decoration == none, null, none);
                        @include transition($nav-link-transition);

                        &:hover,
                        &:focus {
                            color: $black;
                            text-decoration: if($link-hover-decoration == underline, none, null);
                        }

                        &.disabled {
                            color: $nav-link-disabled-color;
                            pointer-events: none;
                            cursor: default;
                        }
                    }
                }
            }
        }
        .login {
            justify-content: flex-start;
        }
    }
}
