// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.

@mixin form-control-validation(
  $text-color: #555,
  $border-color: #ccc,
  $background-color: #f5f5f5
) {
  // Color the label and help text
  .help-block,
  .control-label,
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline,
  &.radio label,
  &.checkbox label,
  &.radio-inline label,
  &.checkbox-inline label {
    color: $text-color;
  }
  // Set the border and box shadow on specific inputs to match
  .form-control {
    border-color: $border-color;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); // Redeclare so transitions work
    &:focus {
      border-color: darken($border-color, 10%);
      $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 6px lighten($border-color, 20%);

      box-shadow: $shadow;
    }
  }
  // Set validation states also for addons
  .input-container-addon {
    color: $text-color;
    background-color: $background-color;
    border-color: $border-color;
  }
  // Optional feedback icon
  .form-control-feedback {
    color: $text-color;
  }
}

@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), 0.6);

  &:focus {
    border-color: $color;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $color-rgba;
  }
}

@mixin input-size(
  $parent,
  $input-height,
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $line-height,
  $border-radius
) {
  #{$parent} {
    height: $input-height;
    padding: $padding-vertical $padding-horizontal;
    font-size: $font-size;
    line-height: $line-height;
    border-radius: $border-radius;
  }

  select#{$parent} {
    height: $input-height;
    line-height: $input-height;
  }

  textarea#{$parent},
  select[multiple]#{$parent} {
    height: auto;
  }
}

@mixin form-group-grid-columns(
  $i: 1,
  $list:
    '.form-group .col-xs-#{$i}, .form-group .col-sm-#{$i}, .form-group .col-md-#{$i}, .form-group .col-lg-#{$i}'
) {
  @for $i from (1 + 1) through $grid-columns {
    $list: '#{$list}, .form-group .col-xs-#{$i}, .form-group .col-sm-#{$i}, .form-group .col-md-#{$i}, .form-group .col-lg-#{$i}';
  }

  #{$list} {
    padding-right: ($form-group-gutter-width / 2);
    // Inner gutter via padding
    padding-left: ($form-group-gutter-width / 2);
  }
}

@mixin form-row-base {
  .row {
    margin: 0 ((-$form-spacing) / 2);

    .column,
    .columns {
      padding: 0 ($form-spacing / 2);
    }

    &.collapse {
      margin: 0;

      .column,
      .columns {
        padding: 0;
      }

      input {
        @include side-radius($opposite-direction, 0);
      }
    }
  }

  input.column,
  input.columns,
  textarea.column,
  textarea.columns {
    padding-#{$default-float}: ($form-spacing / 2);
  }
}

@mixin form-select {
  padding: ($form-spacing / 2);
  font-family: $input__font-family;
  font-size: $input__font-size;
  line-height: normal;
  color: $input__font-color;
  background-color: $select-bg-color;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
  background-position: if($text-direction== 'rtl', 0%, 100%) center;
  background-repeat: no-repeat;
  border-radius: 0;

  border-radius: 0;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  &::-ms-expand {
    display: none;
  }

  border: {
    width: $input__border-width;
    color: $input__border-color;
    style: $input__border-width solid;
  }

  &.radius {
    border-radius: $global-radius;
  }

  &:hover {
    background-color: $select-hover-bg-color;
    border-color: $input__border-color;
  }

  &:disabled {
    cursor: not-allowed;
    background-color: $input__background--disabled;
  }
}

@mixin fieldset {
  padding: $fieldset-padding;
  margin: $fieldset-margin;
  border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;

  legend {
    padding: $legend-padding;
    margin: 0;
    font-weight: $legend-font-weight;
    background: $legend-bg;
    margin-#{$default-float}: rem-calc(-3);
  }
}