.ons-navigation {
    position: relative;

    &-wrapper {
        background: var(--ons-color-header);

        &--neutral {
            background: var(--ons-color-header-neutral);
        }
    }

    &--sub {
        background: var(--ons-color-branded-tint);
        padding-top: 0.5rem;
    }

    &--sub-neutral {
        background: var(--ons-color-grey-15);
        padding-top: 0.5rem;
    }

    &--sub-mobile {
        border-bottom: 4px solid var(--ons-color-branded-tint);
    }

    &-search {
        padding: 1rem;

        @include mq(l) {
            background: none;
            bottom: 65px;
            padding: 0;
            position: absolute;
            right: 1rem;
            width: 20rem;
        }
    }

    &__list {
        list-style: none;
        margin: 0;
        padding: 0 0 0.5rem;

        @include mq(l) {
            padding: 0;
        }

        &-header {
            margin: 0.75rem 0 0.5rem;
            padding: 0 0 0 1rem;
        }
    }

    &__item {
        border-left: 4px solid transparent;
        display: block;
        &--active,
        &:hover {
            border-color: var(--ons-color-white);
        }

        .ons-navigation--sub-mobile & {
            &--active,
            &:hover {
                border-color: var(--ons-color-branded);
                li {
                    border: 0;
                }
            }
        }

        @include mq(l) {
            border-bottom: 4px solid transparent;
            border-left: 0;
            display: inline-block;
            margin: 0 0 0 1rem;
            padding: 0 0 0.25rem;
            position: relative;
            text-align: center;

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

            &--active,
            &:hover {
                border-color: var(--ons-color-white);
            }

            .ons-navigation--sub & {
                &:hover,
                &--active {
                    border-color: var(--ons-color-branded);
                }
            }
        }
    }

    &__link {
        color: var(--ons-color-white);
        display: block;
        margin: 0 0.75rem;
        padding: 0.1rem 0;
        text-decoration: none;

        &--section {
            margin: 0;
            padding: 0;
        }

        &:hover,
        &:focus {
            color: var(--ons-color-white);
            text-decoration: none;
        }

        .ons-navigation--sub &,
        .ons-navigation--sub-mobile & {
            color: var(--ons-color-text-link);
            &:hover,
            &:focus {
                color: var(--ons-color-text-link-hover);
            }
        }

        @include mq(l) {
            display: inline-block;
            margin: 0;
            padding: 0;
        }
    }

    &--sub-neutral & {
        &__link,
        &__link:hover,
        &__link:focus {
            color: var(--ons-color-black);
        }

        &__item {
            &:hover,
            &--active {
                border-color: var(--ons-color-black);
            }
        }
    }

    &--sub-mobile.ons-navigation--sub-neutral {
        background: var(--ons-color-white);
    }

    &__item--active > &__link {
        font-weight: $font-weight-bold;
    }
}