map.get doesn't work in include mixin scss - Angular project

Github project

Hello every one ! I'm on an angular project and i'm stuck with my scss.

I have a mixin (in its own file mixins.scss :

BUTTON MIXINS
===================== */
@mixin btn($color:false,$bgColor:false,$size:false,$hoverBgColor:false){
  button {
    @if $color {
      color: $color;
    }
    @if $bgColor {
      background-color: $bgColor;
    }
    @if $size {
      font-size: $size;
    }
    @if $hoverBgColor {
      &:hover {
        background-color: $hoverBgColor;
      }
    }
  }
}

Also i have a global scss file with my variables :

$colors: (
  primary-black: #000000,
  primary-white: #FFFFFF,
  medium-grey: #7A746E,
  light-cream: #FFF7F0,
);

/* =====================
BUTTON VARIABLE
===================== */

  $btnColor:(
    btnHeaderFooterColor: map-get($colors, "primary-black"),
    btnBody: map-get($colors, "light-red"),
  );

When i want use my mixin for my button-component nothing happen, this is an example of my code.

button-component.scss :

@use "sass:map";
@import './../../../../styles/base/mixins';
@import './../../../../styles/base/global';

button {
  .btn {
    padding: 0.5rem 1.7rem;
    border-radius: 1.8rem;
    border-color: transparent;

    &__headerFooter {
      @include btn(map.get($btnColor, btnHeaderFooterColor));
    }
  }
}

I already tried @usebut i have the same result, my code doesn't appears in the browser inspector, i applied the class in my HTML, but if you want check the project the link is available just on top of this post. I really appreciate your help because for me it's a mystery this situation !

Thanks you for reading me. :)