// btn primary danger dark
uif-btn-set-color($color)
  uif-btn-set(white, $color, $color)
  &.hover
  &:hover
    uif-btn-set(white, shade($color, 15%), shade($color, 15%))
  &.active
  &:active
    uif-btn-set(white, tint($color, 15%), tint($color, 15%))
  &.uif-btn-outline
    uif-btn-set($color, transparent, $color)
    &.hover
    &:hover
      uif-btn-set($color, alpha($color, 0.05), $color)

.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
  //&-radius
  //  border-radius $btn-border-radius
  &-small
    padding 1px 7px
  &-middle
    padding 3px 11px
  &-large
    padding 7px 15px
  &-main
    uif-btn-set-color($secondary-color)
  &-primary
    uif-btn-set-color($primary-color)
  &-default
    uif-btn-set(#142133, #cdd1d8, #cdd1d8)
    &.hover
    &:hover
      uif-btn-set($primary-color, #d8eefc, $primary-color)
    &.active
    &:active
      uif-btn-set($primary-color, #abddfc, $primary-color)
  &-text
    uif-btn-set(#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%