@use 'theme/component';
@use 'theme/global';
@use 'sass:string';
@use '@style/theme/index.scss' as *;

.#{$prefix}-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: inherit;
  font-style: normal;
  vertical-align: -2px;
  outline: none;
  stroke: currentcolor;
}

.#{$prefix}-icon-loading,
.#{$prefix}-icon-spin {
  animation: #{$prefix}-loading-circle $transition-duration-loading infinite
    $transition-timing-function-linear;
}

@keyframes #{$prefix}-loading-circle {
  0% {
    transform: rotate(0);
  }

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

// 减少动态偏好：放慢加载图标旋转（保留加载态指示，避免快速循环带来的不适）
@media (prefers-reduced-motion: reduce) {
  .#{$prefix}-icon-loading,
  .#{$prefix}-icon-spin {
    animation-duration: 3s;
  }
}

.#{$prefix}-icon-hover {
  position: relative;
  display: block;
  cursor: pointer;

  .#{$prefix}-icon {
    position: relative;
  }

  &::before {
    position: absolute;
    display: block;
    box-sizing: border-box;
    background-color: global.$color-transparent;
    border-radius: component.$icon-hover-border-radius;
    transition: background-color $transition-duration-1 $transition-timing-function-standard;
    content: '';
  }

  &:hover::before {
    background-color: component.$icon-hover-color-bg;
  }

  &.#{$prefix}-icon-hover-disabled::before {
    opacity: 0;
  }

  @mixin size($icon-size, $icon-bg-height) {
    line-height: $icon-size;

    &::before {
      top: 50%;
      left: 50%;
      width: $icon-bg-height;
      height: $icon-bg-height;
      transform: translate(-50%, -50%);
    }
  }

  @include size(component.$icon-hover-size-default-icon, component.$icon-hover-size-default-height);

  &-size-mini {
    @include size(component.$icon-hover-size-mini-icon, component.$icon-hover-size-mini-height);
  }

  &-size-small {
    @include size(component.$icon-hover-size-small-icon, component.$icon-hover-size-small-height);
  }

  &-size-large {
    @include size(component.$icon-hover-size-large-icon, component.$icon-hover-size-large-height);
  }

  &-size-huge {
    @include size(component.$icon-hover-size-huge-icon, component.$icon-hover-size-huge-height);
  }
}