Why is this Sass mixin generating an error: "Dart Sass failed with this error: Undefined mixin."

The mixin is defined in a component file (near the bottom):
 _header-footer-and-navigation.scss

// Mobile Menu 
.c-navbar {
    display: block;
    width: max(16rem, 33.3vw);                            
    height: 100vh;                  
    background: #000;               

    &__items {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        padding: 0 4rem;
        
        &--link {
            display: none;
            width: 100%;
            text-align: left;
            text-decoration: none;
            color: $brand-white;
            padding: 2.5rem 0;
        
            & a {
                display: block;
                color: $brand-white;
                text-decoration: none;
            }

            & a:hover {
                display: block;
                color: $brand-gold;
            }

            & a:active {                                // not needed
                display: block;
                color: $cool-grey;
            }

            & .has-submenu {

                & > a::after {
                    font-family: "Ionicons";
                    font-size: 1.2rem;
                    line-height: 1.6rem;
                    font-weight: 900;
                    content: "caret-down";
                    color: white;
                    padding-left: .5rem;
                }
             }
        } 
    }

    &__subitems {
        margin: 0;
        padding: 0;
        font-family: $font-family-base;
        font-size: calc(#{$font-size-base} * .875);
        font-weight: 300;
           text-align: left;
           text-decoration: none;
    
        &--link {
            display: none;                    
            padding: 1rem 1.5rem;
            color: $brand-gold;

            &:hover {
                color: green;
            }
        }
    }
}

    
// Tablet & Desktop Menu
@mixin c-navbar--md {
    .c-navbar {
       width: 100vw;
       height: auto;
       background: $brand-white;

       &__items {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: baseline;
            text-align: left;
            padding: 0 4rem;
       }
    }
}
    



// show menu items
.active .c-navbar__items--link {
    display: block;
}

// show submenu items
.submenu-active .c-navbar__subitems--link {
    display: block;
}

Select allOpen in new window

The mixin is called from:
_media-queries.scss

// md: tablets - landscape
@media (min-width: 768px) {
    @include container--md();
    @include font-size-base--md();
    @include body-copy--md();
    @include banner-head--md();
    @include page-head--md();
    @include section-head--md();
    @include sub-head--md();
    @include paragraph-head--md();
    @include small-head--md();
    @include subtitle-lg--md();
    @include subtitle-sm--md();
    @include main-nav-head--md();
    @include button--md();
    @include caption--md();
    @include l-wrapper-text--md();
    @include c-navbar--md();
}

Select allOpen in new window

This mixin is constructed and handled virtually identical to other mixins, which do not raise an error. I thought it might be the use of "live" units, vw and auto, but that doesn't seem to be the case. I'm hoping somebody can explain this behavior. Here is the error message:

Dart Sass failed with this error: Undefined mixin.
   ╷
69 │     @include c-navbar--md();
   │     ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  _media-queries.scss 69:2  @import
  main.scss 8:9             root stylesheet