.s-if, .s-if:before, .s-if:after, .s-if-label, .s-if-addon, .s-field-icon, .s-field-label, .s-if-control, .s-field-bottom
  transition $input-frame-transition

.s-if
  font-size 16px
  min-height 32px
  margin-top 16px
  margin-bottom 8px
  padding-bottom 8px
  color $primary

  /* Remove browser controller for input type="number" */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button // @stylint ignore
    -webkit-appearance none

  &:before, &:after
    content ''
    position absolute
    bottom 0
    left 0
    right 0
    background currentColor
  &:before
    height 1px
    color rgba(0, 0, 0, .12)
    transform scaleY(1)
  &:after
    width 0
    height 2px
    color currentColor

  &:hover:before
    color rgba(0, 0, 0, .36)

  .group
    margin -5px

.s-if-focusable
  outline 0
  cursor pointer

.s-if-inner
  min-height 24px !important

.s-if-has-label
  min-height 41px
  .s-if-inner
    min-height 34px !important
    padding-top 15px

.s-if-label
  color rgba(0, 0, 0, .46)
  pointer-events none
  user-select none
  top 15px
  left 0
  right 0
  transform-origin left top 0
  transform scale(1) translate(0, 0)
.s-if-label-above
  transform scale(.75) translate(0, -22px)

.s-if-addon
  pointer-events none
  color rgba(0, 0, 0, .46)
  opacity 0
.s-if-addon-left
  padding-right 8px
.s-if-addon-right
  padding-left 8px
.s-if-addon-visible
  opacity 1

.s-if-control
  cursor pointer
  margin-left 8px
  color rgba(0, 0, 0, .54)
  font-size 24px
  &:hover
    opacity .7
.s-if-control-before
  margin-left 0
  margin-right 8px

.s-if-dark
  &:before, .s-if-label, .s-if-control
    color rgba(255, 255, 255, .7)
  &:hover:before, .s-if-addon
    color rgba(255, 255, 255, .9)

.s-if-focused
  &:after
    width 100%
  .s-if-label
    color currentColor

.s-if-inverted
  min-height 38px
  border-radius 2px
  padding-top 8px
  box-shadow $shadow-1
  &:before, &:after
    display none
  .s-if-control
    color white
  .s-if-control, .s-if-inner
    margin-left 8px
    margin-right 8px

.s-if-error
  &:before, &:after, &:not(.s-if-inverted) .s-if-label, .s-if-addon
    color #DB2828
  &:hover:before
    color lighten(#DB2828, 26%)

.s-if-disabled
  cursor not-allowed !important
  .s-if-label, .s-if-control
    opacity .6
    cursor not-allowed !important
  &:before
    background-image linear-gradient(90deg, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, .38) 33%, transparent 0)
    background-color transparent
    background-position bottom
    background-size 3px 1px
    background-repeat repeat-x