$width-icon_extra_small: 8px; // 图标尺寸 - 超小
$width-icon_small: 12px; // 图标尺寸 - 小
$width-icon_medium: 16px; // 图标尺寸 - 中
$width-icon_large: 20px; // 图标尺寸 - 大
$width-icon_extra_large: 24px; // 图标尺寸 - 超大
$motion-icon_spin-animationDuration: 0.6s;
$prefix: 'tenda';

.#{$prefix}-icon {
  display: inline-block;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  text-rendering: optimizeLegibility;
  fill: currentColor;
}

.#{$prefix}-icon-extra-small {
  font-size: $width-icon_extra_small;
}

.#{$prefix}-icon-small {
  font-size: $width-icon_small;
}

.#{$prefix}-icon-large {
  font-size: $width-icon_large;
}

.#{$prefix}-icon-extra-large {
  font-size: $width-icon_extra_large;
}

.#{$prefix}-icon-spinning {
  animation: $motion-icon_spin-animationDuration linear infinite #{$prefix}-icon-animation-rotate;
  animation-fill-mode: forwards;
}

@keyframes #{$prefix}-icon-animation-rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}