[class^="uicon-"], [class*=" uicon-"]
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family 'uifont' !important
  speak none
  font-style normal
  font-weight normal
  font-variant normal
  text-transform none

  /* Better Font Rendering =========== */
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale

.unf-i
  display inline-block
  text-align center
  &-basic
    cursor pointer
    width 32px
    line-height @width
    font-size 16px
    color $icon-basic-color
    border-radius 50%
    transition color 0.2s ease,background-color 0.2s ease
    &^[0]-disabled
      cursor $cursor-disabled
      color $icon-basic-disabled-color
      &^[0]-invert
        color $icon-basic-disabled-color-invert
    &^[0]-available
      &^[0]-invert
        color $icon-basic-color-invert
      &:hover
      &^[0]-hover
        background-color $icon-basic-hover-bg
        &^[0]-invert
          color $icon-basic-hover-color-invert
          background-color $icon-basic-hover-bg-invert
      &:active
      &^[0]-active
        background-color $icon-basic-active-bg
        &^[0]-invert
          color $icon-basic-active-color-invert
          background-color $icon-basic-active-bg-invert
  &-significant
    width 24px
    font-size @width
    line-height @width
    color #FFF
    border-radius 50%
  &-action
    cursor pointer
    width 16px
    font-size @width
    line-height @width
    color $icon-action-color
    &^[0]-disabled
      color $icon-action-disabled-color
      cursor $cursor-disabled
    &^[0]-available
      &:hover
      &^[0]-hover
      &:active
      &^[0]-active
        color $icon-action-hover-color
  &-none
    width 16px
    font-size @width
    line-height @width
  &-rect
    border-radius 4px
    font-size $rect-font-size
    height 20px
    width @height
    line-height @height
    color $icon-rect-color
    &^[0]-available
      cursor pointer
      &:hover
      &^[0]-hover
      &:active
      &^[0]-active
        color $rect-hover-color
        background-color $rect-hover-bg
      &:active
      &^[0]-active
        box-shadow 0 0 0 1px $rect-hover-color inset