/*------------------------------------*\
    #PRIMARY-NAV
\*------------------------------------*/

$primary-nav-bg-color:          $primary-nav-background-color !default;
$primary-nav-alignment:         left !default;
$primary-nav-border:            1px solid $primary-nav-border-color !default;

$primary-nav-link-font-size:    13px !default;
$primary-nav-content-bg-color:  $background-color-component !default;
$primary-nav-link-font-size:    15px !default;

$primary-nav-link-icon-color:   $link-secondary-color !default;


/**
 * 1. provides positioning context for `.primary-nav__content`
 */
.primary-nav {
    display: none;
    z-index: index($page-header, primary-nav);
    background-color: $primary-nav-bg-color;
    border-top: $primary-nav-border;

    @include respond-to($medium-breakpoint) {
        display: block;
    }
}

    .primary-nav__menu {
        @extend %inline-list;
        @extend %content-wrapper;

        @include respond-to($medium-breakpoint) {
            position: relative; /* [1] */
            text-align: $primary-nav-alignment;
            background-color: $primary-nav-bg-color;
        }
    }

        .primary-nav__item {
            margin: 0 $spacing-unit;

            &:first-child {
                margin-left: 0;
            }
        }

        .primary-nav__item--hover {}

            .primary-nav__link {
                @extend %link--secondary;
                display: block;
                position: relative;
                padding: $spacing-unit * 2;
                padding-left: 0;
                font-size: $primary-nav-link-font-size;
                font-weight: bold;
            }

            .primary-nav__link--selected {
                opacity: 1;

                &:after {
                    position: absolute;
                    right: $spacing-unit * 2;
                    bottom: 0;
                    left: 0;
                    height: 3px;
                    background-color: $primary-color;
                    content: '';
                }
            }

                .primary-nav__link-text {}

                .primary-nav__link-icon {
                    margin-left: $spacing-unit;
                    fill: $primary-nav-link-icon-color;
                }


            /**
            * 1. injected via JavaScript
            */
            .primary-nav__content { /* [1] */
                display: none;
                z-index: index($page-header, primary-nav-content);

                .primary-nav__item--hover & ,
                .primary-nav__item:hover & {
                    display: block;
                    position: absolute;
                    top: 100%;
                    right: 0;
                    left: 0;
                    background: $primary-nav-content-bg-color;
                }
            }