@mixin iconfont-mixin($ff: 'aficon') {
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  line-height: 1;
  text-align: center;
  text-rendering: optimizeLegibility;
  text-transform: none;
  vertical-align: baseline;

  &::before {
    display: block;
    font-family: $ff;
  }
}

@mixin iconfont-font($content, $ff: 'aficon') {
  font-family: $ff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  content: $content;
}

// for iconfont font size
// fix chrome 12px bug, support ie
@mixin iconfont-size-under-12px($size, $rotate: 0deg) {
  $font-scale: $size / 12px;

  display: inline-block;
  font-size: $font-size-base;
  transform: scale($font-scale) rotate($rotate);

  :root & {
    font-size: $font-size-base; // reset ie9 and above
  }
}

// for iconfont font size
// fix chrome 12px bug, support ie
@mixin iconfont-spinner($selector: aficon) {
  & > .#{$selector}::before {
    display: inline-block;
    animation: 1s linear infinite iconSpin;
  }
}

// iconfont font size
@mixin generate-icon($prefix: aficon) {
  /* makes the font 33% larger relative to the icon container */
  .#{$prefix}-lg {
    font-size: (4em / 3);
    line-height: (3em / 4);
    vertical-align: -15%;
  }

  .#{$prefix}-2x {
    font-size: 2em;
  }

  .#{$prefix}-3x {
    font-size: 3em;
  }

  .#{$prefix}-4x {
    font-size: 4em;
  }

  .#{$prefix}-5x {
    font-size: 5em;
  }
}

@keyframes iconSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}