.c-overlay {
    background-color: theme('colors.primary.500');
    height: 0;
    overflow-y: auto;
    top: $header-height;
    right: 0;
    left: 0;
    opacity: 0;
    position: fixed;
    transition: opacity $transition-time;
    z-index: -1;
    visibility: hidden;

    &.is-target {
        height: calc(100vh - #{$header-height});
        opacity: 1;
        z-index: 20;
        visibility: visible;

        &.c-overlay--transparent {
            opacity: .7;
        }
    }

    @screen lg {
        &.is-target {
            height: calc(100vh - #{$header-height--desktop});
            top: $header-height--desktop;
        }
    }
}

.c-menu-overlay {
    // Extra high padding mobile due to possible phone-specific overlay-navigations
    padding: 1rem 1rem 6rem;
    overflow: scroll;


    &.c-menu-overlay--blurred {
        background: none;
        backdrop-filter: blur(.5rem);

        @supports not (backdrop-filter: blur(0)) {
            background-color: theme('colors.primary.500');
        }
    }

    @screen lg {
        padding: 0;

        .c-main-navigation--dropdown & {
            order: unset;
            position: static;
            display: flex;
            top: unset;
            right: unset;
            bottom: unset;
            left: unset;
            z-index: 21; // Higher than normal overlay
            height: auto;
            visibility: visible;
            opacity: 1;
            background-color: transparent;
            overflow: visible;
        }

        .c-main-navigation--pinned & {
            width: 40%;
        }

        .c-main-navigation--pinned-left & {
            visibility: visible;
            left: calc(100vw * -.4);
            transition: left $transition-time ease-in-out;
        }

        .c-main-navigation--pinned-right & {
            visibility: visible;
            right: calc(100vw * -.4);
            transition: right $transition-time ease-in-out;
        }

        &.is-target {
            .c-main-navigation--pinned-left & {
                left: 0;
            }

            .c-main-navigation--pinned-right & {
                right: 0;
                left: unset;
            }
        }
    }
}

.c-menu-overlay {
    &.is-target {
        //stylelint-disable
        // Temporary Fix!
        @screen lg {
            .c-main-menu__item {
                .c-main-menu__link.current {
                    &::after {
                        content: '';
                        box-sizing: inherit;
                        position: absolute;
                        left: .6rem;
                        bottom: -.25rem;
                        background: #fff;
                        width: 60%;
                        height: 2px;
                        transition: width $transition-time ease-out;
                    }
                }
            }
        }

        .c-main-menu__link,
        .c-main-menu__second-level-link,
        .c-main-menu__third-level-link {
            color: #fff !important;

            &:hover,
            &:focus {
                color: theme('colors.primary.200') !important;
            }
        }
        //stylelint-enable
    }
}
