/*------------------------------------*\
    $NAV BAR
\*------------------------------------*/

/*
 * The bar that appears below the main navigation.
 *
 * 1. Hide the bar (designed for desktop) at the same size we hide the main
 * navigation.
 */

.nav-bar {
    background-color: #ffffff;
    // @extend .bg--darker-gray;
    @media (max-width: $desktop-navigation-display-breakpoint - 1px) { /* 4 */
        display: none;
    }
}

    /*
     * 1. This should roughly match the implementation (width, padding and centering)
     * of the main desktop navigation.
     * 2. Used to visually pull the nav bar links (including padding) into line with
     * the desktop navigation.
     */

    .nav-bar__inner-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: $base-line-height * 3;
        padding-right: 15px; /* 1 */
        padding-left: 15px; /* 1 */
        max-width: $global-width; /* 1 */
        margin: 0 auto; /* 1 */
        position: relative; /* 2 */
        left: -12px; /* 2 */
    }

        /*
         * 1. Necessary for proper height computation.
         */

        .nav-bar__list {
            display: flex;

            li {
                display: flex;
                align-items: center;
                list-style-type: none; /* 1 */
            }
        }

            /*
             * 1. Override default anchor styles.
             */

            .nav-bar__link {
                display: flex;
                align-items: center;
                position: relative;
                padding: 8px 0;
                margin: 0 20px;
                color: $secondary-color;
                opacity: 0.5;
                font-size: 14px;
                line-height: 14px;
                &:hover,
                &:focus,
                &.active {
                    opacity: 1; /* 1 */
                }

                &.active {
                    &:after {
                        content: '';
                        position: absolute;
                        bottom: -21px;
                        left: 0;
                        height: 2px;
                        width: 100%;
                        background-color: $primary-color;
                    }
                }
            }





/*
 * 1. 16px is the same as the mobile menu.
 * 2. Don't show for large sizes.
 */

.nav-bar-small {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 16px 24px; /* 1 */
    background-color: #ffffff;
    border-bottom: 2px solid $global-border-color;
    @media (min-width: $desktop-navigation-display-breakpoint) { /* 2 */
        display: none;
    }
}

.nav-bar__upgrade-container {
    display: flex;
    flex-direction: column;
}

.nav-bar__upgrade-container a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}