.uif-btn
  s-ellipsis()
  outline 0
  user-select none
  background-image none
  touch-action manipulation
  display inline-block
  text-align center
  cursor pointer
  border 1px solid transparent
  transition color .2s linear,background-color .2s linear,border .2s linear
  font-weight $btn-font-weight
  s-set-font($btn-font-size, $btn-line-height)
  & > span
    margin 0 4px
    display inline-block
  &-radius
    border-radius $btn-border-radius
  &-small
    u-set-btn-size($btn-small-padding, $btn-small-circle)
    .uif-i
      u-set-btn-icon-size($btn-small-icon, $btn-small-icon-transform)
  &-middle
    u-set-btn-size($btn-middle-padding, $btn-middle-circle)
    .uif-i
      u-set-btn-icon-size($btn-middle-icon, $btn-middle-icon-transform)
  &-large
    u-set-btn-size($btn-large-padding, $btn-large-circle)
    .uif-i
      u-set-btn-icon-size($btn-large-icon, $btn-large-icon-transform)
    & > span
      display inline-block
      margin 0 8px
    & > .uif-btn-icon + span
      margin-left 4px
    & > span + .uif-btn-icon
      margin-left -4px
  &-default
    u-set-btn-color(#E6E7EB)
  &-normal
    u-set-btn-color(#CDD1D8)
  &-primary
    u-set-fill-btn-color($primary-color)
  &-danger
    u-set-fill-btn-color($danger-color)
  &-success
    u-set-fill-btn-color(#279A28)
  &-dark
    u-set-fill-btn-color($dark-color)
  &-text
    s-set-color(#142133, transparent, transparent)
    &.hover
    &:hover
      color $primary-color
    &.active
    &:active
      color shade($primary-color, 30%)
  &[disabled]
    pointer-events none
    opacity 0.4
  &-long
    width 100%
  &-loading
    pointer-events none
    position relative
    & > :not(.uif-loading)
      visibility hidden
  & > .uif-loading
    position absolute
    top 50%
    left 50%
    text-indent 0
    transform-origin center center
    animation s-rotate 0.6s linear infinite
    text-align center

.uif-btn
  &.uif-btn-feedback
    position relative
    overflow hidden
    &:before
      transition transform 0.2s ease
      font-size 16px
      font-family 'uifont' !important
      content "\e6cd"
      display block
      text-align center
      position absolute
      left 0
      right 0
      transform translateY(-150%)
    span
      transition transform 0.2s ease
  &.uif-btn-feedback-ok
    &:before
      transform translateY(0)
    span
      transform translateY(150%)


