.navigation {
    display: none;

    @include breakpoint($sm) {
        position: relative;
        display: block;
        width: 100%;
        background: $brand-color-f;
        color: $brand-white;
        font-size: $font-size-small;
        font-weight: $font-weight-bold;
        letter-spacing: 1px;
        line-height: 1.4;
        z-index: $z-mid;

        &::after {
            position: absolute;
            content: '';
            top: 100%;
            left: 50%;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 25px 45px 0 45px;
            border-color: $brand-color-f transparent transparent transparent;
            transform: translateX(-50%);
        }
    }
}

.navigation--fixed {
    position: fixed;
    top: 0;
    z-index: $z-high;
}

.navigation__level-0 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation__item {
    margin: 0;
    flex-basis: 15%;
    text-align: center;
}

.navigation__item--left {
    margin-right: 20px;
}

.navigation__item--right {
    margin-left: 20px;
}

.navigation__link {
    display: block;
    padding: 15px;
    text-transform: uppercase;

    &:hover,
    &:focus {
        color: $brand-color-a;
    }
}