$mw-icon-click-area: (
  20: 20px,
  24: 24px,
  32: 32px,
  36: 36px,
  40: 40px,
);
$mw-icon-in-button: (
  20: 16px,
  24: 20px,
  32: 20px,
  36: 20px,
  40: 24px,
);
$mw-icon: (
  16: 16px,
  20: 20px,
  24: 24px,
);

@mixin mw-mat-icon-override($theme) {
  $background: ();

  $foreground: ();

  $theme-background: map-get($theme, background);
  $theme-foreground: map-get($theme, foreground);

  $background: map-merge($background, $theme-background);
  $foreground: map-merge($foreground, $theme-foreground);

  @include mw-icons($mw-icon-click-area);
}

@mixin mw-icons($mw-icon-click-area) {
  @each $key, $size in $mw-icon-click-area {
    .mw-icon-button-#{$key} > button,
    .mw-icon-button-#{$key} {
      @include mw-icon-button-sizes($key);
    }
  }

  @each $key, $size in $mw-icon {
    .mw-icon-#{$key} > mat-icon,
    .mw-icon-#{$key} > i,
    .mw-icon-#{$key} > span,
    .mw-icon-#{$key} div > mat-icon,
    .mw-icon-#{$key} {
      @include mw-icon-sizes($key);
    }
  }
}

@mixin mw-icon-button-sizes($key) {
  $mw-button-size: map-get($mw-icon-click-area, $key);
  $mw-icon-size: map-get($mw-icon-in-button, $key);

  @include mw-sizes($mw-button-size);
  line-height: $mw-icon-size;
  mat-icon {
    @include mw-sizes($mw-icon-size);
    line-height: $mw-icon-size;
  }
}

@mixin mw-icon-sizes($key) {
  $mw-icon-size: map-get($mw-icon, $key);
  @include mw-sizes($mw-icon-size);
  line-height: $mw-icon-size !important;
}

@mixin mw-sizes($size) {
  font-size: $size !important;
  width: $size !important;
  height: $size !important;
}