/* FORM GENERAL ELEMENTS */

input[type="text"],
input[type="button"],
button,
input[type="email"],
textarea,
label,
select {
  font-size: 1.4rem;
  font-family: $regular
}

 
fieldset{
  margin: 0;
  padding: 0;
  border:none
}

.u-fieldset-title {
  width: 100%;
  position: relative;
  text-transform: uppercase;
  font-weight: normal;
  display: block;
  margin-bottom: $base-space;
  font-size: 1.4rem;
}

label {
  color: $darkgray;
  cursor: pointer;
  font-weight: bold;
  line-height: 1.4;
  display: inline-block;
}


.u-form-field { margin-bottom: $base-space * 1.5; }

.u-type-select-field { margin-bottom: $base-space * .5 }


.u-help-text {
  font-size: 1.4rem;
  display: inline-block;
  font-style: italic;
  margin-top: $base-space *.5;
  line-height: 1.2;
  color: darken($gray,10%);
}

.u-required-field {
  color:darken($gray,30%);
  font-weight: bold;
  margin-left: $base-space * .25;
}


/* INPUT ELEMENTS */

input[type="text"],input[type="email"],textarea,input[type="date"], {
  display: block;
  width: 100%;
  @extend .u-border-box;
  padding: $base-space * 0.5;
  border: 1px solid darken($lightgray,10%);
  background: lighten($lightgray,5%); 
  position: relative;
  color: darken($bodytext,10%);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  @include animate;

  &:focus{background:$white;border-color:darken($gray,10%)}

  &.error{border-color:darken($red,10%);}

}

textarea {height: 12rem}


/* VALIDATIONS */

.u-inline-validation {
  margin-top: $base-space * 2.5;
  line-height: 1.5;
  font-size: 1.4rem;

  .u-input-icon{
    width: 100%;
    height: 2rem;
    background-size: 1.5rem;
    padding-left:$base-space * 1.5;
    background-repeat:no-repeat;
    background-position: left center;
    background-size: 1.5rem;

    &.is-valid {
      background-image:url(../icons/check.png);
      color:$darkgreen;
    }

    &.is-invalid {
      color:$red;
      background-image:url(../icons/error.png);
    }
  }
}


.u-field-error {
  font-size: 1.4rem;
  display: inline-block;
  font-style: italic;
  margin-top: $base-space *.5;
  line-height: 1.2;
  color: $red;
}

/* CUSTOM FILE UPLOAD */

.u-file-upload {

  background: $lightgray;
  display: block;
  border: darken($lightgray,10%);
  cursor: pointer;
  padding: $base-space * 2;

  input[type="file"] {
    position: absolute;
    left: -1000rem;
  }

}


/* DATE PICKER */

input[type="text"].js-datepicker {
  padding: $base-space * 0.35;
  font-size: 1.3rem;
}


/* SELECT */

.u-select-wrapper {
  display: block;
  width: 100%;
  border: 1px solid darken($lightgray,10%);
  background: lighten($lightgray,5%); 
  position: relative;
  @extend .u-border-box;
  
  &:after {
    content:'›';
    font-family: "SSStandard";
    font-size:2.6rem;
    color: $gray;
    right:1rem;
    top:-.3rem;
    position:absolute;
    pointer-events:none;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

}

.u-select-wrapper--small {
  border-width: 1px;
  width: 80%;

  &:after {
    font-size:.8rem;
    right:1rem;
    top:1rem;
  }
}


select {
  width: 100%;
  padding: $base-space * 0.35;
  @extend .u-border-box;
  background: none;
  color: darken($bodytext,10%);
  border:none;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  font-size: 1.3rem;
}


/* CHECKBOX VALIDATION */

.u-check-message {
  display: block;
  margin: $base-space 0;
}




/* SMALL INPUTS */

.u-input--small {

  input[type="text"],input[type="email"],textarea, .select-wrapper select {
    padding: $base-space * .5;
    font-size: 1.3rem;
  }

  textarea {height: 8rem;}

  .u-select-wrapper:after {top:.8rem}

}



/* ASSIGN SEAT INPUTS */

.u-assign-seat__label {
  font-size: 1.6rem;
  margin: $base-space 0 $base-space *.5
}

.u-assign-seat__input {
  margin-bottom: $base-space * 2
}


/* EMPTY STATE FORM */

.o-empty-state-form {
  display: block;
  padding: $base-space * 2 $base-space * 2;
  background: $lightgray;
  border: 1px solid darken($lightgray,2%);
  text-align: center;
  text-decoration: none;
  @include animate;

  &:hover {
    text-decoration: none;
    background: darken($lightgray,2%);
    border: 1px solid darken($lightgray,4%);

  }
}



.o-empty-state-form__description {
  color: $bodytext;
  font-size: 1.8rem;
  margin-bottom: 0;
}




/** SEARCH ELEMENT */

.o-search {position: relative;}

.o-search__icon {
  background-size: 100%;
  position: absolute;
}


.o-search--default{
  
  .o-search__input {
    background: lighten($lightgray,5%);
    border:1px solid darken($lightgray,10%);
    @include border-radius(5px);
    padding: $base-space $base-space $base-space $base-space * 3;
    width: 100%;
    color: $darkgray;
    @include animate;
    @extend .u-border-box;
    display: block;

    &:focus {background:$white;}

  }

}


.o-search--medium{

  .o-search__input  {
    padding: $base-space * 0.75 $base-space * 0.75 $base-space * 0.75 $base-space * 3;
  }

  .o-search__icon{
    width: 1.5rem;
    height: 1.5rem;
    top: 1.4rem;
    left:1.8rem;
  }

  .o-search__input {
    font-size: 1.6rem;
    border-width: 1px;
  }
}


.o-search--big{

  .o-search__icon{
    width: 1.8rem;
    height: 1.8rem;
    top:2rem;
    left:1.8rem;
  }

  .o-search__input {
    font-size: 2.29rem;
    border-width: 2px;
  }
}




/* SEARCH FILTERS */


.o-search-filters {
  margin-top: 1.2rem;
  margin-bottom: 3.0rem;
}

.o-search-filters__filter-name {
  font-size: 1.4rem;
  display: inline-block;
  margin-bottom: 0.2rem;
}

.o-search-filters__tags {

  li { 
    display: inline-block;
    margin-right: 0.5rem;
  }

  li:last-child{margin-right: 0;}

  a {
    display: inline-block;
    background: $darkgray;
    color: $lightgray;
    padding: $base-space * 0.25 $base-space * 0.75;
    font-size: 1.3rem;
    text-decoration: none;
    @include border-radius(4px);
    @include animate;

    &:hover,&:focus {
      background: $blue; 
    }
  }
}


/* JQUERY UI STATE HIGHLIGHT */

.ui-state-highlight{
  background: lighten($lightgray,2%);
  border:none;
}


/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .u-select-wrapper select {padding-right:18px}
}