.c-overlay {
    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;
    }

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

.c-overlay--primary {
    background-color: theme('colors.primary.500');
}

.c-overlay--secondary {
    background-color: theme('colors.secondary.500');
}

.c-overlay--gray {
    background-color: theme('colors.gray.800');
}

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

    @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;
        }
    }
}
