/*** FANCY INPUT BOXES ***/

.fancy-input-boxes input[type="text"],
.fancy-input-boxes input[type="email"],
.fancy-input-boxes input[type="search"],
.fancy-input-boxes input[type="number"],
.fancy-input-boxes input[type="color"],
.fancy-input-boxes input[type="password"],
.fancy-input-boxes input[type="date"],
.fancy-input-boxes textarea,
input[type="text"].fancy-input-boxes,
input[type="email"].fancy-input-boxes,
input[type="search"].fancy-input-boxes,
input[type="number"].fancy-input-boxes,
input[type="color"].fancy-input-boxes,
input[type="password"].fancy-input-boxes,
input[type="date"].fancy-input-boxes,
textarea.fancy-input-boxes {
  
  outline: none;
  padding: 0.3em;
  font: inherit;
  color: inherit;
  @include rounded(2px);
  @include border-2($ff-color-inputbox-border);
  
  &.correct {
    @include border-2($ff-color-inputbox-answer-correct);
  }
  &.incorrect {
    @include border-2($ff-color-inputbox-answer-incorrect);
    @include accessibility-border-bottom($ff-color-inputbox-answer-incorrect);
  }
  
  /*** STATES ***/
  
  //FOCUS
  &:focus {
    @include focus-box-shadow-input($ff-color-inputbox-focused);
    @include border-2($ff-color-inputbox-focused);
  }  
  &.incorrect:focus {
    @include focus-box-shadow-input($ff-color-inputbox-answer-incorrect);
    @include border-2($ff-color-inputbox-answer-incorrect);
    @include accessibility-border-bottom($ff-color-inputbox-answer-incorrect);
  }
  &.correct:focus  {
    @include focus-box-shadow-input($ff-color-inputbox-answer-correct);
    @include border-2($ff-color-inputbox-answer-correct);
  }
  
  //HOVER
  &:not(:disabled):hover {
    @include border-2($ff-color-inputbox-hover);
  }
  &.incorrect:not(:disabled):hover {
    @include border-2($ff-color-inputbox-answer-incorrect);
    @include accessibility-border-bottom($ff-color-inputbox-answer-incorrect);
  }
  
  //DISABLED
  &:disabled {
    opacity: 0.8;
    cursor: not-allowed;
  }
  
  &.correct:disabled,
  &.incorrect:disabled {
    opacity: 1;
    cursor: not-allowed;
  }
  
} 

.fancy-input-boxes input[type="color"] {
  padding: 0;
  background-color: $ff-color-inputbox-bg;
}

.fancy-input-boxes.special-inline-border input[type="text"] {

  //add 0.5em space on both sides of every inline input box
  margin: 0 0.5em; 

  @include special-inline-border();
  
  &.correct {
    @include special-inline-border();
  }
  &.incorrect {
    @include special-inline-border();
  }
  
  //FOCUS
  &:focus {
    @include special-inline-border();
  }  
  &.incorrect:focus {
    @include special-inline-border();
  }
  &.correct:focus  {
    @include special-inline-border();
  }
  
  //HOVER
  &:not(:disabled):hover {
    @include special-inline-border();
  }
  &.incorrect:not(:disabled):hover {
    @include special-inline-border();
  }
}

/*** /FANCY INPUT BOXES ***/