.s-field
  margin-top 16px
  margin-bottom 8px
  .s-if
    margin-top 0 !important
    margin-bottom 0 !important

.s-field-icon
  width $field-icon-size
  height $field-icon-size
  min-width $field-icon-size
  font-size $field-icon-size
  margin-right 16px
  color $field-label-color

.s-field-label
  padding-right 8px
  color $field-label-color
.s-field-label-inner
  min-height $field-icon-size
.s-field-label-hint
  padding-left 8px

.s-field-bottom
  font-size 12px
  padding-top 8px
  color rgba(0, 0, 0, .46)
.s-field-no-input
  margin-top 8px
  border-top 1px solid rgba(0, 0, 0, .12)
.s-field-counter
  color $field-label-color
  padding-left 8px

.s-field-dark
  .s-field-label, .s-field-icon, .s-field-counter, .s-field-bottom
    color rgba(255, 255, 255, 60%)
  .s-field-no-input
    border-top 1px solid rgba(255, 255, 255, .7)

.s-field-with-error
  .s-field-icon, .s-field-label, .s-field-bottom
    color $negative
  .s-field-no-input
    border-top 1px solid $negative

@media (max-width $breakpoint-xs-max)
  .s-field-label + .s-field-content
    padding-top 8px
  .s-field-floating.s-field-no-label
    .s-field-margin
      margin-top 12px
  .s-field-no-label .s-field-label
    display none

@media (min-width $breakpoint-sm-min)
  .s-field-floating
    .s-field-margin
      margin-top 12px
  .s-field-label + .s-field-content
    padding-top 0