@import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp");

$variants: "two-tone", "sharp", "round", "outlined";

// $sizeMap: (
//   "small": 24px,
//   "medium": 32px,
//   "large": 38px,
//   "xlarge": 42px,
// );

$sizeMap: (
  "small": 1rem,
  "medium": 1.2rem,
  "large": 1.6rem,
  "xlarge": 42px,
);

.material-icons {
  pointer-events: none;

  &.material-icons__size {
    @each $key, $value in $sizeMap {
      &-#{$key} {
        font-size: #{$value};
      }
    }
  }
  @each $variant in $variants {
    &.material-icons-#{$variant} .material-icons__size {
      @each $key, $value in $sizeMap {
        &-#{$key} {
          font-size: #{$value};
        }
      }
    }
  }
}

// .material-icons {
//   @each $type in $list {
//     &--#{$type} {
//       @each $key, $value in $sizeMap {
//         &-#{$key} {
//           font-size: #{$value};
//         }
//       }
//     }
//   }
// }

/* Rules for using icons as black on a light background. */
.material-icons {
  &.md-dark {
    color: rgba(0, 0, 0, 0.54);

    &.md-inactive {
      color: rgba(0, 0, 0, 0.26);
    }
  }
}

/* Rules for using icons as white on a dark background. */
.material-icons {
  &.md-light {
    color: rgba(255, 255, 255, 1);
    &.md-inactive {
      color: rgba(255, 255, 255, 0.3);
    }
  }
}