How to specify a css class when i use an angular component?

I am on an angular project and i try to follow the atomic design method and BEM for my CSS structure.

I have atoms components and some have modifier css and i can't use them when i called my component for example :

:host{
    .btn {
      padding: 0.7rem 1.7rem;
      border-radius: 1.8rem;
      border-color: transparent;

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

When i want to use headerFooter in my page where my component is set it isn't work. I tried different solution but i haven't find a solution yet.

This is my project if you want try it : my-project