/*------------------------------------*\
    $FORMS
\*------------------------------------*/
/**
 *
 * Demo: jsfiddle.net/inuitcss/MhHHU
 *
 */
fieldset{
    padding: $baseline;
    border: none;
	margin-bottom: 1.5rem;
}

input:focus {
  outline: none;
}


/**
 * Text inputs
 *
 * Instead of a `[type]` selector for each kind of form input, we just use a
 * class to target any/every one, e.g.:
   <input type=text class=text-input>
   <input type=email class=text-input>
   <input type=password class=text-input>
 *
 */
.text-input,
textarea {
    display: block;
    border-width: 1px;
    padding: quarter($baseline) halve($baseline);
    &:focus {
      outline: none;
    }

	&.ng-invalid.ng-touched{
		border: 1px solid $alert-color;

		&:focus{
			border: 1px solid $alert-color;
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba($alert-color, 0.6);
		}
	}
    /**
     * Style these via your theme stylesheet.
     */
}

.text-input--small,
%text-input--small {
  @include text-small;
  padding: 0 quarter($baseline);
  width: auto;
}


/**
 * Group sets of form fields in a list, e.g.:
 *
   <ul class=form-fields>
       <li>
           <label />
           <input />
       </li>
       <li>
           <label />
           <select />
       </li>
       <li>
           <label />
           <input />
       </li>
   </ul>
 *
 */
.form-fields{
    list-style:none;
    margin:0;
}
    .form-fields > li{
        position: relative;
        padding: 0;
        margin-bottom: $baseline;
    }
    .form-fields > li:last-child{
        margin-bottom:0;
    }


/**
 * Labels
 *
 * Define a `.label` class as well as a `label` element. This means we can apply
 * label-like styling to meta-labels for groups of options where a `label`
 * element is not suitable, e.g.:
 *
   <li>
       <span class=label>Select an option below:</span>
       <ul class="multi-list  four-cols">
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
       </ul>
   </li>
 *
 */
label,
.label{
    display:block;
}
    /**
     * Extra help text in `label`s, e.g.:
     *
       <label>Card number <small class=additional>No spaces</small></label>
     *
     */
    .additional{
        display:block;
        font-weight:normal;
    }


/*
 * Groups of checkboxes and radios, e.g.:
 *
   <li>
       <ul class=check-list>
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
       </ul>
   </li>
 *
 */
.check-list{
    list-style:none;
    margin:0;
}
    /*
     * Labels in check-lists
     */
    .check-label,
    .check-list label,
    .check-list .label{
        display:inline-block;
    }


/**
 * Spoken forms are for forms that read like spoken word, e.g.:
 *
   <li class=spoken-form>
       Hello, my <label for=spoken-name>name</label> is
       <input type=text class=text-input id=spoken-name>. My home
       <label for=country>country</label> is
       <select id=country>
           <option>UK</option>
           <option>US</option>
           <option>Other</option>
       </select>
   </li>
 *
 */
.spoken-form label{
    display:inline-block;
    font:inherit;
}


/**
 * Extra help text displayed after a field when that field is in focus, e.g.:
 *
   <label for=email>Email:</label>
   <input type=email class=text-input id=email>
   <small class=extra-help>.edu emails only</small>
 *
 * We leave the help text in the document flow and merely set it to
 * `visibility:hidden;`. This means that it won’t interfere with anything once
 * it reappears.
 *
 */
/*small*/.extra-help{
    display:inline-block;
    visibility:hidden;
}
.text-input:active + .extra-help,
.text-input:focus + .extra-help{
    visibility:visible;
}

select {
  cursor: pointer;
  outline: none;
}

.label--extension {
  display: inline-block;
}

.text-input,
%text-input,
textarea,
.tag-input-ctn {
	color: $text-color;

	@include font-size(14px);
	width: 100%;
	border-width: 1px;
	border-style: solid;
	border-color: $tertiary-color;
	@include border-radius();
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	&:focus {
  	border-color: $primary-color;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba($primary-color,0.6);
	}
}

.tag-input-ctn {
  min-height: 32px;

  input {
    display: inline-block;
    float: left;
    height: 28px;
    padding: 0px;
    font-size: inherit;
    color: inherit;
    border: 0px;
    margin: 0 8px;
    background: transparent;

    &:focus {
      outline: 0;
      box-shadow: 0px;
    }
  }
  .input-tag {
    padding: 4px 8px;
    line-height: 12px;
    font-size: 11px;
    background-color: transparent;
    display: inline-block;
    float: left;
    border-radius: 2px;
    margin: 4px 0 4px 8px;
    border: 1px solid darken($primary-color, 10%);
    color: darken($primary-color, 10%);

    .delete-tag {
      display: inline-block;
      font-size: 12px;
      cursor: pointer;
      padding: 0px 0 0 8px;
      vertical-align: middle;
    }
  }
}

.text-input__text,
%text-input__text {
  padding: quarter($baseline) halve($baseline);
  display: inline-block;
}

.form-fields {


  li {
     label {
        margin-bottom: .5rem;
      }
  }
  .form-fields--group {
    li {
      margin-bottom: 0;
      border-radius: 0;

      .text-input {
        border-radius: 0;
        border-bottom-width: 0;
      }

      &:first-child {
        .text-input {
          border-top-left-radius: 3px;
          border-top-right-radius: 3px;
        }
      }
      &:last-child {
        .text-input {
          border-bottom-width: 1px;
          border-bottom-right-radius: 3px;
          border-bottom-left-radius: 3px;
        }
      }
    }
  }
}

.text-input__type {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 0 3px 3px 0;
  border: 1px solid $tertiary-color;
  color: $secondary-color;
  background: color(gray, light);
  padding: 3px 10px;
  width: 80px;
}

fieldset {
  padding: 0;
}

.search-bar {
	position: relative;
	/* text-align: right; */

	button {
		position: absolute;
		right: 6px;
		top: 6px;
		background: transparent;
		border: none;
		outline: none;

		i {
			color: $secondary-color;
		}
	}
}

.search-bar--small {
	button {
		right: 0;
		top: -2px;
	}
}


// /*small*/.extra-help{
// 	@include font-size(14px);
// 	color: $secondary-color;
//     display:inline-block;
//     position: absolute;
//     top: 0;
//     right: 0;
//     transition: opacity 0.3s ease-out;
//     opacity: 0;
//     padding: halve($inuit-input-padding - $inuit-input-border-width) 0;
// }
// .text-input:active + .extra-help,
// .text-input:focus + .extra-help{
//     opacity: 1;
// }

*::-webkit-input-placeholder {
    color: darken(color(grey, dark), 35%);
}
*:-moz-placeholder {
    color: darken(color(grey, dark), 35%);
}
*::-moz-placeholder {
    color: darken(color(grey, dark), 35%);
}
*:-ms-input-placeholder {
    color: darken(color(grey, dark), 35%);
}