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

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

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

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

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

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

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

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

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

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

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

  &--home-pg-badge {
    @include icon-size(27);
    @include icon-color($color-white);

    background-color: $color-primary;
    height: $home-pg-icon-width;
    width: $home-pg-icon-width;
    border-radius: 100%;
    display: inline-flex;

    svg {
      margin: auto;
    }
  }
}