.uif-form-item
  &.w-25
    width 25%
  &.w-33
    width 33.33%
  &.w-50
    width 50%
  &.w-66
    width 66.66%
  &.w-75
    width 75%
  &.w-100
    width 100%

// label
.uif-form-label
  width 100%
  flex-shrink 0
  color #191919
  font-size 12px
  line-height 20px
  padding-right 10px
  .required
    font-size 16px
    line-height 16px
    position relative
    top 5px
    margin-right 2px
    color #EC3751
  &-left
    line-height 16px
    text-align right
    padding-top 6px
  &-top
    padding-left 10px

// icon
.uif-form-info
  font-size 12px
  line-height 20px
  display flex
  align-items center
  height 0
  transition height 0.2s ease
  overflow hidden
  &-active
    height 24px
  .uif-i
    margin-right 4px
  &-error
    color #EC3751
  &-info .uif-i
    color #3889FE
  &-tip
    color #bfbfbf


// content
.uif-form-content
  width 0
  flex auto

// border
.uif-form-border
  position relative
  display flex
  align-items flex-start
  transition margin-bottom 0.2s ease,border-color 0.2s ease
  border-radius 2px
  border 1px solid transparent
  & > .uif-select-wrap
  & > .uif-input-wrap
  & > .uif-date-picker-wrap
    width 0
    flex auto
  &-rect
    background-color #f6f7fa
    border-color #CACCD4
    &:not(&-disabled):hover
      border-color #A1ABB3
    &-error
    &-error:hover
      border-color #EC3751 !important
    .uif-form-item-icon
      background-color #F1F3F5
      border-left 1px solid #CACCD4
  &-fix-radio
  &-fix-checkbox
  &-fix-switch
    padding-top 5px
  &-fix-changer
    padding-top 3px
  &-split
    margin auto 0
    height 20px
    border-left 1px solid #CACCD4

.uif-form-item
  flex auto
  display flex
  align-items flex-start
  margin-bottom 16px
  &-top
    flex-direction column
    .uif-form-content
      width 100%
  &-empty
    flex auto
  &-size-small .x-uif-form-item-icon
    top 6px
  &-tip-content
    width 280px
  &-slot
    position relative

.uif-form-border
  & > .uif-input.focus
  & > .uif-select.focus .uif-input
  & > .uif-date-picker.focus .uif-input
    z-index 1
    border-radius 1px
    box-shadow 0 0 0 1px #3889fe

.uif-form-item-icon
  align-self stretch
  display flex
  align-items center
  padding-left 2px
  padding-right 6px
  order 100
  & > .uif-i
  .form-icon
    width 20px
    margin-left 4px
    height 20px
  & > .uif-i
    font-size 16px
    line-height 20px
  & + &
    border-width 0
    padding-left 0
    margin-left -6px

.uif-form-item.textarea-resize
  .uif-form-content
    position relative
  .uif-input-wrap
    width unset
  .uif-form-border
    z-index 100
    position absolute
    left 0
    top 0
    min-width 100%
    min-height 100%

.uif-form-after-slot
  position relative
  width 0