/**
 * Button Component Style for uxcore
 * @author
 *
 * Copyright 2014-2015, Uxcore Team, Alinw.
 * All rights reserved.
 */

@__buttonPrefixCls: kuma-button;

@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.@{__buttonPrefixCls} {
  > icon {
    margin-right: 8px;
    vertical-align: middle;
  }
}

.@{__buttonPrefixCls}-loading {
  position: relative;
}

.@{__buttonPrefixCls}-loading-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  animation: rotation linear 2s;
  animation-iteration-count: infinite;
  vertical-align: middle;
  fill: white;
}

.@{__buttonPrefixCls}-outline {
  .@{__buttonPrefixCls}-loading-icon {
    fill: @brand-primary;
  }
}
.@{__buttonPrefixCls}-secondary {
  .@{__buttonPrefixCls}-loading-icon {
    fill: @normal-alpha-2;
  }
}

.@{__buttonPrefixCls}-text {
  color: #000;
  cursor: pointer;
  border: none;
  outline: none;
  &:hover {
    color: @brand-primary;
  }
}


.@{__buttonPrefixCls}-lg {
  .@{__buttonPrefixCls}-loading-icon {
    width: 20px;
    height: 20px;
  }
  > icon {
    font-size: 20px;
  }
}
.@{__buttonPrefixCls}-sm {
  .@{__buttonPrefixCls}-loading-icon {
    width: 14px;
    height: 14px;
  }
  > icon {
    font-size: 14px;
  }
}