//============================================================
// Form tags
//============================================================

fieldset {
  margin-bottom: $space-3;
  border: $fieldset-border-width solid $fieldset-border-color;
  @include border-radius($fieldset-border-radius);
  @each $name, $color in $color-set {
    &.#{$name} {
      border-color: $color;
      > legend { color: $color !important; }
    }
  }
}

legend {
  padding: $legend-padding-y $legend-padding-x;
  font-size: $legend-font-size;
  font-weight: $legend-font-weight;
  color: $fieldset-border-color;
}

label {
  display: inline-block;
  margin-bottom: $space-1;
  font-weight: $label-font-weight;
  color: $label-color;
}

// input common
input,
select,
textarea {
  font-size: $input-font-size;
  line-height: $input-line-height;
  color: inherit;
  vertical-align: middle;
  outline-color: $input-outline-color;

  &[disabled],
  &[readonly] {
    color: $input-disabled-color;
    background-color: $input-disabled-bg-color !important;
  }
}

// input generalize
@include general-inputs() {
  width: 100%;
  padding: $input-padding-y $input-padding-x;
  background-color: $input-bg-color;
  border: $input-border-width solid $input-border-color;
  @include border-radius($input-radius);

  &:focus {
    border-color: $input-outline-color;
  }

  @each $name, $color in $color-set {
    &.#{$name} {
      @if $auto-input-bg-color-enable {
        background-color: rgba($color, .1);
      }

      border-color: $color;
      outline-color: $color;
    }
  }
}

input[type=text] {
  &.password,
  &.pw {
    -webkit-text-security: disc;
  }
}

textarea {
  height: 12em; // default height.
  &.inline { height: auto; }
}

input[type=submit],
input[type=button],
input[type=reset] {
  @extend %btn;
  @extend %btn-disabled;
  @extend %btn-color-set;
}

input[type=checkbox],
input[type=radio] {
  width: $input-height * .5;
  height: $input-height * .5;
  margin-right: .5em;
  vertical-align: middle;

  // `readonly` is not working on checkbox and radio.
  &[disabled] ~ label {
    color: $input-disabled-color;
  }
}

input[type=file],
input[type=range] {
  width: 100%;
}

input[type=color] {
  width: $input-height * 1.5;
  height: $input-height;
  padding: 0;
}

//============================================================
// Form helpers
//============================================================

%form-inline {
  width: auto;
}

.form-inline {
  display: inline-block;
  padding: 0;
  margin: 0;

  @include form-inline-target {
    @extend %form-inline;
  }

  textarea { height: auto; }
}

@include form-inline-target {
  &.inline {
    @extend %form-inline;
  }
}

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

//============================================================
// Input with icons
//============================================================

%input-icon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: $input-height;
  height: $input-height;
  pointer-events: none;
}

.input {
  position: relative;
  max-width: 100%;

  &.inline { display: inline-block; }

  &.with-icon,
  &.with-icon-right {
    input { padding-right: $input-height; }
  }

  &.with-icon-left {
    input { padding-left: $input-height; }
  }

  > .icon,
  > .icon-right {
    @extend %input-icon;
    @include position-middle-right(0);
  }

  > .icon-left {
    @extend %input-icon;
    @include position-middle-left(0);
  }
}

//==========================================================
// Form grid
// Special replacement for `.row` for tighter form layouts.
// https://github.com/twbs/bootstrap/blob/v4-dev/scss/_forms.scss#L187
//==========================================================

.form-row {
  $_tight-gutter: $grid-gutter-width / 4;

  display: flex;
  flex-wrap: wrap;
  margin-right: - $_tight-gutter;
  margin-left: - $_tight-gutter;

  > .col,
  > [class*="col-"] {
    padding-right: $_tight-gutter;
    padding-left: $_tight-gutter;
  }
}

// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
// primarily for client-side validation via scoped `:invalid` and `:valid`
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server-side validation.
// @link https://github.com/twbs/bootstrap/blob/master/scss/forms/_validation.scss

@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}