// scss-lint:disable QualifyingElement

//
// Textual form controls
//

form {
  margin: 0;
}

.form-control {
  @include set-font-size($input-font-size-md);

  display: block;
  width: $input-width;
  padding: $input-padding-y-md $input-padding-x;
  color: $input-color;

  .dada-ico.dada-ico-sm {
    line-height: rem(22px);
  }

  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }
}

// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file,
.form-control-range {
  display: block;
}

//
// Labels
//

// For use with horizontal and inline forms, when you need the label text to
// align with the form controls.
.form-control-label {
  padding: $input-padding-y-md $input-padding-x;
  margin-bottom: 0;
}

//
// Legends
//

// For use with horizontal and inline forms, when you need the legend text to
// be the same size as regular labels, and to align with the form controls.
.form-control-legend {
  padding: $input-padding-y-md $input-padding-x;
  margin-bottom: 0;
  font-size: $font-size-base;
}

// Todo: clear this up

// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 8.3, iOS doesn't support `week`.

// _::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  &.form-control {
    line-height: $input-height-md;
  }

  &.input-sm,
  .input-group-sm &.form-control {
    line-height: $input-height-sm;
  }

  &.input-lg,
  .input-group-lg &.form-control {
    line-height: $input-height-lg;
  }
}

// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.form-control-xs {
  @include set-font-size($input-font-size-xs);

  padding: $input-padding-y-xs $input-padding-x;

  .dada-ico.dada-ico-sm {
    line-height: rem(22px);
  }
}

.form-control-sm {
  @include set-font-size($input-font-size-sm);

  padding: $input-padding-y-sm $input-padding-x;

  .dada-ico.dada-ico-sm {
    line-height: rem(22px);
  }
}

.form-control-lg {
  @include set-font-size($input-font-size-lg);

  padding: $input-padding-y-lg $input-padding-x;

  .dada-ico.dada-ico-md {
    line-height: rem(24px);
  }
}

// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.form-group {
  margin-bottom: $form-group-margin-bottom;
}

// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).

.form-inline {
  margin: 0;

  > :not(:last-child) {
    margin-right: $form-group-inline-margin-right;
  }

  .form-group {
    display: inline-block;
    margin-bottom: $form-group-inline-margin-bottom;
    vertical-align: bottom;

    > label {
      display: block;
      color: $form-group-label-color;
      margin-bottom: $form-group-inline-label-margin-bottom;
    }

    > label.checkbox,
    > label.radio {
      margin-bottom: 0;
      line-height: $form-group-inline-component-line-height;
    }

    &:not(:first-child) > .btn:first-child {
      margin-left: $form-group-inline-btn-margin-left;
    }
  }

  // Allow folks to *not* use `.form-group`
  .form-control {
    display: inline-block;
    vertical-align: middle;
  }

  .input-group {
    vertical-align: middle;

    .input-group-addon,
    .input-group-btn,
    .form-control {
      width: auto;
    }

    > .form-control {
      width: 100%;
    }
  }

  .form-control-label {
    margin-bottom: 0;
    vertical-align: middle;
    font-weight: bold;
  }
}

.form-horizontal {
  .form-group {
    @include make-row();
    margin-left: 0;
    margin-right: 0;

    > label {
      padding-left: $input-padding-x;
      padding-right: $input-padding-x;
    }

    &:not(:last-child) {
      margin-bottom: $form-group-margin-bottom;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
  .input,
  .form-control,
  .dada-search {
    width: 100%;
  }
}
