How to solve crossbrowser issue when applying angular5 component modifiers in IE10+?

Question

css

Good afternoon everyone, guys, I encountered such a question about the cross-browser layout of application components in Angular 5, modifiers for a component in IE11 do not work modifier
layout:

:host(.--green button) {
  color: white;

  background-color: $clPrimarySecond;
  border-color: $clPrimaryThird;

  &:hover {
    background-color: $clPrimaryThird;
  }

  &:active {
    border-top-color: $clPrimaryThird !important;
    border-left-color: $clPrimaryThird !important;
  }

  /* Includes Themes Styles  */
  @include mail-theme($themes) {
    background-color: use('clPrimaryMain');
    border-color: use('clPrimaryThird');

    &:hover {
      background-color: use('clPrimaryThird');
    }

    &:active {
      border-top-color: use('clPrimaryThird') !important;
      border-left-color: use('clPrimaryThird') !important;
    }
  }
  /* themes end*/
}

tried different options like:

:host {
&.--green button {}
}
//----
:host(.--green) button{}
//----
:host-context(.--green) button{}

It should be like this screen from eja prntscr.com/jr1y1l, skin from IE prntscr.com/jr201h
In general, it doesn’t work, if someone came across, tell me which way to look, I will be glad for any advice, thanks in advance!