//
// Forms
// --------------------------------------------------
@import "../plugins/awesome-bootstrap-checkbox";

@mixin form-control-validation(
  $text-color: color-text-dark,
  $icon-color: color-text-dark,
  $background-color: color-text-light,
  $border-color: color-border,
  $border-color-focus: $brand-primary
) {
  // Color the label and help text
  .help-block,
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline,
  &.radio label,
  &.checkbox label,
  &.radio-inline label,
  &.checkbox-inline label {
    @include themes(color, $text-color);
  }
  // Set the border and box shadow on specific inputs to match
  .form-control {
    @include themes(border-color, $border-color);
    @include box-shadow(none);

    &:focus {
      @include themes(border-color, $border-color-focus);

      @include form-control-focus($input-border-focus);
    }
  }
  // Set validation states also for addons
  .input-group-addon {
    @include themes(border-color, $border-color);
    @include themes(color, $text-color);
  }
  // Optional feedback icon
  .form-control-feedback {
    @include themes(color, $icon-color);
  }

  .form-select {
    &:before {
      @include themes(color, $icon-color);
    }
  }
}

// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `$input-border-focus` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
@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;
    @include box-shadow(
      inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 8px $color-rgba
    );
  }
}

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

  border-color: $color !important;
  outline: 0;
  @include box-shadow(
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px $color-rgba
  );
}

// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
@mixin input-size(
  $parent,
  $input-height,
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $line-height,
  $border-radius
) {
  #{$parent} {
    padding: $padding-vertical $padding-horizontal;
    font-size: $font-size;
    line-height: $line-height;
    border-radius: $border-radius;
  }

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

  input[type="number"]#{$parent} {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    line-height: $line-height + $padding-vertical * 2;
  }
}

@mixin form-inline {
  @media (min-width: $screen-sm-min) {
    display: flex;
    align-items: center;

    label {
      margin-bottom: 0;
      margin-right: $grid-unit-x;
    }

    .form-group {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      vertical-align: middle;
      margin-right: $grid-unit-x * 2;
    }

    .form-control {
      display: inline-block;
      width: auto;
      vertical-align: middle;
    }

    .form-control-static {
      display: inline-block;
    }

    .input-group {
      display: inline-table;
      vertical-align: middle;

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

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

    .control-label {
      margin-bottom: 0;
      vertical-align: middle;
    }

    .has-feedback .form-control-feedback {
      top: 0;
    }
  }
}

@mixin input-range() {
  @each $theme, $map in $themes {
    .#{$theme} {
      $track-bg: map-get($map, switch-default-bg);

      input[type="range"] {
        -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
        width: 100%; /* Specific width is required for Firefox. */
        background: transparent; /* Otherwise white in Chrome */
        display: block;
      }

      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
      }

      input[type="range"]:focus {
        outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
      }

      input[type="range"]::-ms-track {
        width: 100%;
        cursor: pointer;

        /* Hides the slider so custom styles can be added */
        background: transparent;
        border-color: transparent;
        color: transparent;
      }

      // Styling the Thumb
      // -----------------------------

      $size: $grid-unit-y * 2;
      $thumb-bg: $brand-primary;
      $thumb-border-radius: ceil($size * 0.5);
      $box-shadow: map-get($map, switch-thumb-bos-shadow);

      /* Special styling for WebKit/Blink */
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: $size;
        width: $size;
        border-radius: $thumb-border-radius;
        background: $thumb-bg;
        cursor: pointer;
        margin-top: -(
            ceil($size * 0.5) - 2
          ); /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */

        @include box-shadow($box-shadow);
      }

      /* All the same stuff for Firefox */
      input[type="range"]::-moz-range-thumb {
        height: $size;
        width: $size;
        border-radius: $thumb-border-radius;
        background: $thumb-bg;
        cursor: pointer;

        @include box-shadow($box-shadow);
      }

      /* All the same stuff for IE */
      input[type="range"]::-ms-thumb {
        height: $size;
        width: $size;
        border-radius: $thumb-border-radius;
        background: $thumb-bg;
        cursor: pointer;

        @include box-shadow($box-shadow);
      }

      // Styling the Track
      // -----------------------------

      $track-height: ceil($grid-unit-y * 0.5);
      $track-border-radius: ceil($track-height * 0.5);
      $track-bg-filled: $brand-primary;

      input[type="range"]::-webkit-slider-runnable-track {
        width: 100%;
        height: $track-height;
        cursor: pointer;
        background: $track-bg;
        border-radius: $track-border-radius;
      }

      input[type="range"]:focus::-webkit-slider-runnable-track {
        background: $track-bg;
      }

      input[type="range"]::-moz-range-track {
        width: 100%;
        height: $track-height;
        cursor: pointer;
        background: $track-bg;
        border-radius: $track-border-radius;
      }

      input[type="range"]::-ms-track {
        width: 100%;
        height: $track-height;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
      }
      input[type="range"]::-ms-fill-lower {
        background: $track-bg;
        border-radius: $track-border-radius;
      }
      input[type="range"]:focus::-ms-fill-lower {
        background: $track-bg;
      }
      input[type="range"]::-ms-fill-upper {
        background: $track-bg;
        border-radius: $track-border-radius;
      }
      input[type="range"]:focus::-ms-fill-upper {
        background: $track-bg;
      }
    }
  }
}