// $input-border = $form-border-color
// $form-border-color;


// Form control focus state
@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    outline: 0;
    border-color: $power-navy;
    box-shadow: inset 0 0 0 0.1rem $power-navy, inset 0 0.1rem 0.2rem 0 rgba($power-navy, $opacity-2);
  }
}

@mixin style-placeholder {
  &::-webkit-input-placeholder { @content; }
  &:-moz-placeholder { @content; }
  &::-moz-placeholder { @content; }
  &:-ms-input-placeholder { @content; }
}




// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]

.form-control {
  display: block;
  width: 100%;
  height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: $padding-base-vertical ($padding-base-horizontal/1.5);
  font-size: $font-small;
  font-weight: $bold;
  line-height: $line-height-base;
  color: $gray-9;
  background-color: $input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid $form-border-color;
  border-radius: $input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  box-shadow: none;
  transition-property: border-color, box-shadow, color, background-color;
	transition-duration: .24s;
	transition-timing-function: $bezier;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  @include form-control-focus;

  @include style-placeholder {
    color: $gray-5;
		font-style: italic;
		font-weight: $regular;
		@include smooth-font;
	}
  &[disabled],
  fieldset[disabled] & {
    background-color: $input-bg-disabled;
    color: $sky-dark;
    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
  }

  &[disabled],
  fieldset[disabled] & {
    cursor: $cursor-disabled;
  }
  &.clear {


    // height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
    padding: $padding-base-vertical ($padding-base-horizontal/1.5);
    // font-size: $font-small;
    // font-weight: $bold;
    // line-height: $line-height-base;
    // color: $gray-9;
    background-color: transparent;
    background-image: none;
    border: 0;

  }
}