@import './common/var.less';

.fe-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  font-size: @font-size;
  height: @button-height;
  padding: 0 0.8em;
  border-radius: @border-radius;
  border: 1px solid @border-color;
  background: @button-bg;
  &:hover {
    border-color: @border-color-hover;
  }
  &:active {
    background-color: @button-active-bg;
  }
  &:focus {
    outline: none;
  }
  > .fe-icon {
    order: 1;
    margin-right: 0.3em;
  }
  > .fe-button__content {
    order: 2;
  }
  &.fe-icon--right {
    > .fe-icon {
      order: 2;
      margin-right: 0;
      margin-left: 0.3em;
    }
    > .fe-button__content {
      order: 1;
    }
  }
  .fe-button__spinning {
    animation: spin 1.5s infinite linear;
  }
}