@keyframes rollCircle {
  0% {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

.ml-icon {
  vertical-align: middle;
  &.size-large {
    font-size: 44px;
  }
  &.size-medium {
    font-size: 40px;
  }
  &.size-small {
    font-size: 36px;
  }
  &.size-mini {
    font-size: 28px;
  }
  &.is-roll {
    display: inline-block;
    animation: rollCircle 1s linear infinite;
  }
  &.ss-primary {
    color: $ml-theme-primary-color;
  }
  &.ss-success {
    color: $ml-theme-success-color;
  }
  &.ss-info {
    color: #909399;
  }
  &.ss-warning {
    color: $ml-theme-warning-color;
  }
  &.ss-danger {
    color: $ml-theme-error-color;
  }
  &.ss-gray {
    color: $ml-gray-color;
  }
  &.ss-blue {
    color: $ml-blue-color;
  }
  &.ss-green {
    color: $ml-green-color;
  }
  &.ss-pink {
    color: $ml-pink-color;
  }
  &.ss-red {
    color: $ml-red-color;
  }
  &.ss-orange {
    color: $ml-orange-color;
  }
  &.ss-purple {
    color: $ml-purple-color;
  }
  &.ss-white {
    color: $ml-white-color;
  }
}