.c-menu-overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    right: 0;
    left: 0;
    background-color: theme('colors.primary.500');
    z-index: 1;

    &.is-target {
        display: block;
        opacity: 1;

        .c-live-menu__item-link {
            color: theme('colors.white');
        }
    }
}

.c-menu-overlay__content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 0 1rem;
    margin: 8rem auto 0;
    max-width: 72rem;
    color: theme('colors.white');
    list-style: none;

    ul {
        margin-top: theme('margin.8');
        padding-left: 0;
        list-style: none;
    }

    @media screen and (max-width: map-get($breakpoints, 'lg') - 1px) {
        flex-direction: column;
        margin-top: 12rem;

        ul {
            margin-top: theme('margin.4');
        }
    }
}

.c-menu-overlay__section {
    margin-right: 3.625rem;

    @media screen and (max-width: map-get($breakpoints, 'lg') - 1px) {
        border-bottom: 1px solid theme('colors.primary.400');
        margin-right: 0;
        margin-bottom: theme('margin.8');
        padding-bottom: theme('padding.8');
    }
}

.c-menu-overlay__item-divider {
    display: flex;
    justify-content: space-between;

    @screen lg {
        display: block;
    }
}

.c-menu-overlay__main-menu-link {
    font-weight: bold;
    font-size: 1.625rem;
    transition: $transition-time;

    &:hover,
    &:active,
    &:focus {
        @apply text-primary-200;
    }
}

.c-menu-overlay-submenu {
    margin: 0;
    padding: theme('padding.2') theme('padding.4');

    @media screen and (max-width: map-get($breakpoints, 'lg') - 1px) {
        display: none;

        &.is-target,
        &:target {
            display: block;
        }
    }
}

.c-menu-overlay__submenu-toggle {
    display: none;

    &[aria-expanded=true] {
        svg {
            transform: rotate(90deg);
        }
    }

    @media screen and (max-width: map-get($breakpoints, 'lg') - 1px) {
        display: inline;
    }
}

.c-menu-overlay__submenu-toggle-icon {
    height: 1.5em;
    width: 1.5em;
    top: .25rem;
}

.c-menu-overlay__submenu-item {
    margin-bottom: theme('margin.4');

    @media screen and (max-width: map-get($breakpoints, 'lg') - 1px) {
        margin-bottom: theme('margin.2');
    }
}

.c-menu-overlay__submenu-link {
    font-size: theme('textSizes.lg');
    color: theme('colors.white');
    transition: $transition-time;

    &:hover,
    &:active,
    &:focus {
        @apply text-primary-200;
    }
}
