@import '../style/variable.less';

.@{prefix}-icon {
  display: inline-block;
  background-repeat: no-repeat;
  cursor: pointer;
  color: var(--kt-icon-foreground);
  line-height: 1;

  &.mask-mode {
    background-color: var(--foreground);
  }

  &-loading {
    animation: kt-icon-spin 1s infinite linear;
  }

  &-small {
    font-size: 14px;
  }

  &-large {
    font-size: 16px;
  }

  &-clickable {
    &:hover {
      // transform: scale(1.1);
      color: var(--kt-icon-hoverForeground);
    }

    &:active {
      // transform: scale(1.1);
      color: var(--kt-icon-clickForeground);
    }
  }

  &-disabled {
    color: var(--kt-icon-disableForeground);
    pointer-events: none;
    cursor: not-allowed;
  }
}

@keyframes kt-icon-spin {
  100% {
    transform: rotate(360deg);
  }
}

// Animated Icons
// --------------------------

.iconfont-anim-spin {
  animation: fa-spin 2s infinite linear;
}

.iconfont-anim-pulse {
  animation: fa-spin 1s infinite steps(8);
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }

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

// Rotated & Flipped Icons Mixins
// -------------------------
.icon-anim-rotate(@degrees, @rotation) {
  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{@rotation})';
  transform: rotate(@degrees);
}

.icon-anim-flip(@horiz, @vert, @rotation) {
  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{@rotation}, mirror=1)';
  transform: scale(@horiz, @vert);
}

.iconfont-rotate-90 {
  .icon-anim-rotate(90deg, 1);
}
.iconfont-rotate-180 {
  .icon-anim-rotate(180deg, 2);
}
.iconfont-rotate-270 {
  .icon-anim-rotate(270deg, 3);
}

.iconfont-flip-horizontal {
  .icon-anim-flip(-1, 1, 0);
}
.iconfont-flip-vertical {
  .icon-anim-flip(1, -1, 2);
}
.iconfont-flip-both,
.iconfont-flip-horizontal.iconfont-flip-vertical {
  .icon-anim-flip(-1, -1, 2);
}

// Hook for IE8-9
// -------------------------

:root {
  .iconfont-rotate-90,
  .iconfont-rotate-180,
  .iconfont-rotate-270,
  .iconfont-flip-horizontal,
  .iconfont-flip-vertical,
  .iconfont-flip-both {
    filter: none;
  }
}
