.Header {
    height: $header-height;

    .navbar {
        background-color: black;
        border-radius: 0;
        margin-bottom: 0;
        align-items: stretch;
        float: inherit;
        padding: 0 $viewport-padding-lg;

        @media (max-width: $viewport-lg) {
            padding: 0 $viewport-padding;
        }
    }

    .Header-navItem,
    .navbar-dark .navbar-nav .nav-link {
        color: #fff;

        &-active,
        &.active,
        &:active,
        &:hover {
            background-color: var(--midnight-850);
            color: #fff;
        }
    }

    .navbar-brand {
        align-items: center;
        display: flex;
        margin: 0;
        padding: 0;
    }

    &-navItem,
    .navbar-dark .navbar-nav .nav-link {
        color: #fff;
        cursor: pointer;
        padding: $nav-item-padding;
        user-select: none;

        &-active,
        &.active,
        &:active,
        &:hover {
            background-color: var(--puma);
            color: #fff;
        }

        &.dropdown-toggle {
            padding: 0 $nav-item-hpadding;
        }
    }

    .navbar-nav {
        align-items: center;
    }

    &-navItem,
    .navbar-nav > &-navItem {
        font-size: $font-size-14;
        line-height: 20px;
    }

    &-external-link {
        &-beta {
            bottom: 0.5rem;
            color: var(--gray-400);
            font-size: 0.9rem;
            height: 0.9rem;
            position: relative;
            margin-left: 3px;
        }
        &-icon {
            fill: white;
        }
        &-text {
            margin-left: 3px;
        }
    }
}