.header {
    height: 5rem;
    padding: 0;
    background: $black;
    position: relative;

    &__logo {
        display: block;
        position: absolute;
        left: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Main navigation */

.main-nav {
    margin: 0;
    position: absolute;
    right: 1.5rem;
    top: 0;

    &__list {
        margin: 0;
        display: flex;
    }

    &__item {
        padding: 0 1rem;
        margin: 0;
        background: none;
        display: block;
    }

    &__link {
        color: $white;
        font-size: 1rem;
        text-decoration: none;
        display: block;
        line-height: 5rem;
        white-space: nowrap;
        padding: 0;

        &:hover,
        &:active,
        &:focus {
            color: $white;
        }

        &--active {
            color: $black;
        }

        @include focusOutline();
    }
}

/* Mobile menu */

.menu-trigger {
    border: none;
    width: 2.75rem;
    height: 2.75rem;
    position: absolute;
    right: 0.7em;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    text-align: center;
    z-index: 3000;
}

@media screen and (max-width: $mobileMenu) {
    .menu-trigger {
        display: block;
    }

    .header {
        height: auto;
        min-height: 4rem;
        width: 100vw;

        &__logo {
            top: 1.25rem;
            left: 1.25rem;
            z-index: 1500;
        }
    }

    .main-nav {
        background: $black;
        z-index: 1050;
        width: 100%;
        left: 100%;
        margin: 0;
        top: 0;
        padding: 4rem 1.5rem 1rem 1.5rem;
        position: absolute;
        transition: left 0.15s ease-out;
        height: calc(100vh - 4rem);
        overflow: auto;

        &__list {
            width: 100%;
        }

        &__item {
            display: block;
            width: 100%;
            padding: 0;
        }

        &__link {
            line-height: 3.3;
            font-size: 1rem;
            text-decoration: none;
            color: $white;
            display: block;

            &:after {
                display: none;
            }

            &:hover,
            &:active,
            &:focus {
                color: $white;
            }
        }
    }

    .body--menu-open {
        overflow: hidden;
        height: 100vh;

        .main-nav {
            left: 0;
        }

        .icon-menu {
            fill: $white;
        }
    }
}
