// ========== 颜色配置 ==========
$icon-color-black: #000;
$icon-color-gray: #808080;
$icon-color-pressed: #666;

// ========== 样式定义 ==========
.update-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  
  &__icon {
    color: $icon-color-black;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    svg {
      width: 100%;
      height: 100%;
    }
  }

  &:hover:not(&--disabled) {
    .update-btn__icon {
      color: $icon-color-pressed;
    }
  }

  &--loading {
    cursor: wait;
    
    .update-btn__icon {
      color: $icon-color-gray;
      
      svg {
        animation: update-btn-spin 0.5s linear infinite;
        transform-origin: center;
      }
      
      svg circle:last-child {
        animation: update-btn-loading 1s linear infinite;
      }
    }
  }

  &--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

// ========== 动画定义 ==========
@keyframes update-btn-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes update-btn-loading {
  0% {
    stroke-dashoffset: 47.124;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -47.124;
  }
}
