$uif-select-small-icon-size = 24px
$uif-select-default-icon-size = 26px
$uif-select-large-icon-size = 32px

.uif-select
  width 100%
  display inline-block
  .uif-input
    width 100%
    .input
      cursor pointer

.uif-select .uif-popper-reference
  position relative
  .uif-i
    cursor pointer
    color #7E8B98
    position absolute
    right 0
    top 0
  .uif-input-size-small .input
    padding-right $uif-select-small-icon-size
  .uif-input-size-small  + .uif-i
    width $uif-select-small-icon-size
    line-height @width
  .uif-input-size-default .input
    padding-right $uif-select-default-icon-size
  .uif-input-size-default  + .uif-i
    width $uif-select-default-icon-size
    line-height @width
  .uif-input-size-large .input
    padding-right $uif-select-large-icon-size
  .uif-input-size-large  + .uif-i
    width $uif-select-large-icon-size
    line-height @width

.uif-option-items
  margin -1px 0 0
  padding 0
  background-color #FFF
  border 1px solid $primary-color
  list-style none
  max-height 300px
  overflow auto
  &-size-small .uif-option-item
    padding-top 2px
    padding-bottom @padding-top
  &-size-large .uif-option-item
    padding-top 6px
    padding-bottom @padding-top

.uif-option-item
  padding 4px 8px
  font-size 12px
  line-height 20px
  cursor pointer
  white-space nowrap
  &:hover
    background-color #e1edfa

.uif-option-empty
  text-align center
  font-size 12px
  line-height 20px
  padding 4px 0
  color #aaa