.q-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

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

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

.q-field-dark
  .q-field-label, .q-field-icon, .q-field-counter, .q-field-bottom
    color $form-light
  .q-field-no-input .q-field-bottom
    border-top 1px solid $field-label-color

.q-field-with-error
  .q-field-icon, .q-field-label, .q-field-bottom
    color $negative
    color var(--q-color-negative)
  .q-field-no-input .q-field-bottom
    border-top 1px solid $negative
    border-top 1px solid var(--q-color-negative)

.q-field-with-warning
  .q-field-icon, .q-field-label, .q-field-bottom
    color $warning
    color var(--q-color-warning)
  .q-field-no-input .q-field-bottom
    border-top 1px solid $warning
    border-top 1px solid var(--q-color-warning)

.q-field-margin
  margin-top 5px
.q-field-floating .q-field-margin
  margin-top 23px
.q-field-no-input .q-field-margin
  margin-top 3px
.q-field-content
  .q-if.q-if-has-label:not(.q-if-standard)
    margin-top 9px
  .q-if-standard:not(.q-if-has-label)
    padding-top 6px
  .q-option-group
    padding-top 0
.q-field-no-input .q-field-content
  padding-top 6px

qfield-vertical()
  &:not(.q-field-no-label)
    .q-field-margin
      margin-top 0
    .q-if-standard:not(.q-if-has-label)
      padding-top 0
    .q-if.q-if-has-label:not(.q-if-standard)
      margin-top 0px
  &.q-field-no-label .q-field-label
    display none

.q-field-vertical
  qfield-vertical()

@media (max-width $breakpoint-xs-max)
  .q-field-responsive
    qfield-vertical()