@mixin icon {
  display: inline-flex;

  > svg {
    width: 100%;
    height: 100%;
    * {
      transition: fill $hover-transition-time;
    }
  }
}

@mixin icon-size($size) {
  $icon-size: $size * .1rem;
  width: $icon-size;
  height: auto;
  margin: $icon-size / 4;
}

@mixin icon-color($color) {
  > svg * {
    fill: $color;
  }
}

@mixin icon-style-default {
  @include icon-color($color-black);
}

@mixin icon-style-active {
  @include icon-color($color-primary);
}

@mixin icon-style-inverted {
  > svg * {
    fill: $color-white;
  }
}

.icon {
  @include icon;
  @include icon-size(16);
  @include icon-style-default;

  &.icon--tiny {
    @include icon-size(10);
  }

  &.icon--large {
    @include icon-size(24);
  }
}