@import url('../../assets/font/iconfont.scss');

$icon-colors: (
  'brand': $brand
) !default;

$icon-theme-colors: map-merge(
  $map1: $auxiliary-colors,
  $map2: $icon-colors
) !default;

.mx {
  &-icon{
    &-img{
      width: 1em;
      height: 1em;
      object-fit: contain;
      vertical-align: top;
    }

    @each $name,$color in $icon-theme-colors {
      &--#{$name}{
        &:not(.mx-icon--img){
          color: $color;
        }
        
        &.mx-icon--img{
          background-color: $color;
        }
      }
    }
  }
}