$btn-primary = #394B59
$btn-primary-hover = #10161A
$btn-default = #8A9BA8
$btn-default-hover = #EDF1F3


.uif-btn
  border-radius 4px
  span
    font-weight inherit
  & > .uif-i
    width 12px
    line-height 12px
    font-size 16px
    display inline-block
    position relative
    top 1px
    &.uif-btn-icon-l
      left -4px
    &.uif-btn-icon-r:only-child
    &.uif-btn-icon-r:only-child
      left -2px
  &-small
    min-width 52px
    padding 1px 0
  &-middle
    padding 5px 10px
  &-large
    font-size 16px
    padding 9px 12px
  &-main
    uif-btn-set(#FFF, #17A0E6, #17A0E6)
    &:hover
    &.hover
    &.active
      uif-btn-set(#FFF, #3E79A0, #3E79A0)
  &-primary
    uif-btn-set(#FFF, $btn-primary, $btn-primary)
    &:hover
    &.hover
    &.active
      uif-btn-set(#FFF, $btn-primary-hover, $btn-primary-hover)
  &-default
    uif-btn-set($btn-default, #FFF, $btn-default)
    &:hover
    &.hover
    &.active
      uif-btn-set($btn-primary-hover, $btn-default-hover, $btn-primary-hover)
  &-text
    uif-btn-set($btn-primary, transparent, transparent)
    &:hover
    &.hover
    &.active
      uif-btn-set(#FFF, $btn-primary, $btn-primary)
  &[disabled]
    pointer-events none
    opacity 0.4
  &-long
    width 100%