@mixin icon {
  display: inline-flex;

  > svg {
    width: 100%;
    height: 100%;

    * {
      transition: fill $hover-transition-time;
    }
  }
}

@mixin icon-size($size) {
  $icon-size: $size * 0.1rem;

  width: $icon-size;
  height: $icon-size;
  margin: $icon-size / 4;

  > svg {
    width: $icon-size;
    height: $icon-size;
  }
}

@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);
  }

  &.icon--remove,
  &.icon--red {
    @include icon-color($color-red);
  }

  &.icon--green {
    @include icon-color($color-green);
  }

  &.icon--gray {
    @include icon-color($color-gray);
  }

  &.icon--blue {
    @include icon-color($color-blue-darker);
  }

  &.icon--medium {
    @include icon-size(12);
  }

  &.icon--gold {
    @include icon-color($color-gold-dark);
  }

  &.icon--circle {
    svg {
      border-radius: 100%;
      border-style: solid;
      border-width: 1px;
      padding: 2px;
    }
  }
}