.ui-button{
  &:hover {
    border: none;
    outline: none;
    box-shadow: none;
  }
  &.primary {
    background-color: #1890ff;
    color: #f5f5f5;
    outline: 1px solid #1890ff;
    &.disabled{
      background-color: #f5f5f5;
      color:#b8b8cb ;
      outline:1px solid #b8b8cb ;
    }
    &:hover {
      outline: 1px solid #1890ff;
      background-color: lighten(#1890ff,10)
    }
  }
  &.default {
    background-color: #ffffff;
    color: #636567;
    outline: 1px solid #b8b8cb;
    &.disabled{
      background-color: #f5f5f5;
      color:#b8b8cb ;
    }
    &:hover {
      outline: 1px solid #1890ff;
      color:  #1890ff;
    }
  }
  &.text {
    background-color:#ffffff;
    color: #636567;
    &.disabled{
      background-color: #f5f5f5;
      color:#b8b8cb ;
      outline:1px solid #b8b8cb ;
    }
    &:hover {
      -webkit-filter: brightness(95%);
    }
  }
  &.dashed {
    background-color: #ffffff;
    color: #636567;
    outline: 1px dashed #b8b8cb;
    &.disabled{
      background-color: #f5f5f5;
      color:#b8b8cb ;
      outline:1px solid #b8b8cb ;
    }
    &:hover {
      color: #1890ff;
      outline: 1px dashed #1890ff;
    }
  }
  &.link {
    background-color: inherit;
    color: #1890ff;
    &.disabled{
      color:#b8b8cb ;
    }
  }
  border: none;
  outline: none;
  box-shadow: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 4px 15px;
  transition: all 250ms;
  border-radius: 1px;
  &>.ui-button-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ui-button-icon-action infinite 1s linear;
  }
  &.big{
    padding: 8px 19px;
    font-size: 18px;
  }
  &.normal{
    padding: 4px 15px;
    font-size: 16px;
  }
  &.small{
    padding: 2px 8px;
    font-size: 14px;
  }
  &.loading{
    padding: 6px 10px;
  }
  &.disabled{
    cursor:not-allowed
  }
  cursor:pointer;
  &.radius{
    border-radius: 3px;
  }
  white-space: nowrap;
}

@keyframes ui-button-icon-action {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}