$icon-dimensions: 1.25rem;
$icon-dimensions-small: 1rem;
$icon-dimensions-medium: 1.5rem;
$icon-dimensions-large: 2rem;

.icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  vertical-align: text-top;
  height: $icon-dimensions;
  width: $icon-dimensions;
  fill: $text;

  &.is-text {
    width: 1.2em;
    height: 1.2em;
    pointer-events: none;
  }

  &.is-small {
    height: $icon-dimensions-small;
    width: $icon-dimensions-small;
  }

  &.is-medium {
    height: $icon-dimensions-medium;
    width: $icon-dimensions-medium;
  }

  &.is-large {
    height: $icon-dimensions-large;
    width: $icon-dimensions-large;
  }

  &.is-faded {
    fill: $grey-light;
    color: $grey-light;
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);

    &.is-#{$name} {
      fill: $color;
      color: $color;
    }
  }

  &.is-grey {
    fill: $grey;
    color: $grey;
  }
}