svg {
  vertical-align: middle;
}

.mc-icon {
  width: 2em;
  height: 2em;

  @for $i from 1 through 16 {
    &--#{$i} {
      @include step(font-size, $i);
    }
  }

  &--rotate-90 {
    transform: rotate(90deg);
  }

  &--rotate-180 {
    transform: rotate(180deg);
  }

  &--rotate-270 {
    transform: rotate(270deg);
  }

  &--circled {
    padding: 0.25em;
    border: 1px solid currentColor;
    border-radius: 50%;
  }


  // DEPRECATED

  // Sizing
  &--sm {
    width: 15px;
    height: 15px;
  }

  &--md {
    width: 20px;
    height: 20px;
  }

  &--lg {
    width: 25px;
    height: 25px;
  }

  &--xl {
    width: 40px;
    height: 40px;
  }

  // Color modification
  &--transparent {
    fill: none;
  }
}