/**
* @component input
*/

@import '../settings/colors';
@import '../settings/core';
@import '../settings/inputs';
@import '../settings/forms';
@import '../settings/labels';
@import '../settings/form-controls';
@import '../tools/functions/core';
@import '../tools/mixins/input';
@import '../tools/mixins/spacing-responsive';
@import '../tools/mixins/vendor-prefixes';
@import 'node_modules/@collabui/icons/scss/mixins';

@include exports('cui-input') {
  .#{$input__class} {
    @include input-color(
      $color: $input__font-color,
      $color-disabled: $input__font-color--disabled,
      $color-placeholder: $input__font-color--placeholder,
      $color-read-only: $input__font-color--read-only,
      $background-color: $input__background,
      $background-color-disabled: $input__background--disabled,
      $background-color-hover: $input__background--hover,
      $border-color: $input__border-color
    );
    @include box-sizing(border-box);

    height: $input__height;
    padding-top: $input__padding-top;
    padding-right: $input__padding-right;
    padding-bottom: $input__padding-bottom;
    padding-left: $input__padding-left;
    margin: $input__margin;
    font-family: $input__font-family;
    font-size: $input__font-size;
    border: 1px solid $input__border-color;
    border-radius: $input__border-radius;
    transition: box-shadow ease-out 0.15s;
    // fix to remove the very annoying "X" added to all input fields in IE > 9.
    // http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx
    &::-ms-clear,
    &::-ms-reveal {
      width: 0px;
      height: 0px;
    }

    // Contrast
    .#{$contrast-class} & {
      @include input-color(
        $color-disabled: $input__font-color--disabled--contrast,
        $background-color-disabled: $input__background--disabled--contrast,
        $background-color-hover: $input__background--hover--contrast,
        $border-color: $input__border-color--contrast
      );
    }

    // Dark
    .#{$dark-class} &,
    .#{$input__class}-group--dark & {
      @include input-color(
        $color: $input__font-color--dark,
        $color-disabled: $input__font-color--disabled--dark,
        $color-placeholder: $input__font-color--placeholder--dark,
        $color-read-only: $input__font-color--read-only--dark,
        $background-color-disabled: $input__background--disabled--dark,
        $background-color-hover: $input__background--hover--dark,
        $border-color: $input__border-color--dark
      );

      .#{$contrast-class} & {
        @include input-color(
          $background-color-hover: $input__background--hover--dark--contrast,
          $border-color: $input__border-color--dark--contrast
        );
      }
    }

    // Filled
    .#{$client-class} &,
    .#{$input__class--filled} &,
    &.#{$input__class--filled} {
      @include input-color(
        $color-read-only: $input__font-color--read-only--filled,
        $background-color: $input__background--filled,
        $background-color-hover: $input__background--filled--hover,
        $border-color: $input__border-color--filled
      );
    }

    //Filled - Dark
    .#{$dark-class} &,
    &.#{$dark-class},
    .#{$input__class}-group--dark & {
      .#{$client-class} &,
      .#{$input__class--filled} &,
      &.#{$input__class--filled} {
        @include input-color(
          $color-read-only: $input__font-color--read-only--filled--dark,
          $background-color: $input__background--filled--dark,
          $background-color-hover: $input__background--filled--hover--dark
        );
      }
    }

    &:focus,
    &.focus {
      @include focus-styles;

      transition: box-shadow ease-in 0.15s;
    }

    &[readonly],
    &.readonly {
      cursor: default;
    }

    &:disabled,
    &.disabled {
      cursor: not-allowed;
    }
  }

  .#{$input__class}-group {
    position: relative;
    display: flex;
    flex-direction: column;

    @include vr-spacing(mb, 0.875);

    &.column,
    &.columns {
      padding: 0;
    }

    &.disabled {
      .#{$input__class}__label,
      .#{$label__class},
      .#{$input__class}__secondary-label-container
        > .#{$input__class}__secondary-label {
        cursor: not-allowed;
      }
    }

    &.error {
      @include input-group-color(
        $background-color: $input__background--error,
        $border-color: $input__border-color--error,
        $background-color-hover: $input__background--error--hover,
        $color-message: $input__font-color--error
      );

      .#{$contrast-class} & {
        @include input-group-color(
          $background-color: $input__background--error,
          $border-color: $input__border-color--error--contrast,
          $background-color-hover: $input__background--error--hover,
          $color-message: $input__font-color--error--contrast
        );
      }

      .#{$dark-class} &,
      &.#{$input__class}-group--dark {
        @include input-group-color(
          $background-color: $input__background--error--dark,
          $border-color: $input__border-color--error--dark,
          $background-color-hover: $input__background--hover--error--dark,
          $color-message: $input__font-color--error--dark
        );

        .#{$contrast-class} & {
          @include input-group-color(
            $background-color: $input__background--error--dark--contrast,
            $border-color: $input__border-color--error--dark--contrast,
            $background-color-hover:
              $input__background--hover--error--dark--contrast,
            $color-message: $input__font-color--error--dark--contrast
          );
        }
      }

      .#{$input__class}__messages {
        display: inline-flex;

        &:before {
          @include icon-clear_16;
        }
      }
    }

    &.warning {
      @include input-group-color(
        $background-color: $input__background--warning,
        $border-color: $input__border-color--warning,
        $background-color-hover: $input__background--warning--hover,
        $color-message: $input__font-color--warning
      );

      .#{$contrast-class} & {
        @include input-group-color(
          $background-color: $input__background--warning,
          $border-color: $input__border-color--warning--contrast,
          $background-color-hover: $input__background--warning,
          $color-message: $input__font-color--warning--contrast
        );
      }

      .#{$dark-class} &,
      &.#{$input__class}-group--dark {
        @include input-group-color(
          $background-color: $input__background--warning--dark,
          $border-color: $input__border-color--warning--dark,
          $background-color-hover: $input__background--hover--warning--dark,
          $color-message: $input__font-color--warning--dark
        );

        .#{$contrast-class} & {
          @include input-group-color(
            $background-color: $input__background--warning--dark--contrast,
            $border-color: $input__border-color--warning--dark--contrast,
            $background-color-hover:
              $input__background--hover--warning--dark--contrast,
            $color-message: $input__font-color--warning--dark--contrast
          );
        }
      }

      .#{$input__class}__messages {
        display: inline-flex;

        &:before {
          @include icon-warning_16;
        }
      }
    }

    &.success {
      @include input-group-color(
        $background-color: $input__background--success,
        $border-color: $input__border-color--success,
        $background-color-hover: $input__background--success--hover,
        $color-message: $input__font-color--success
      );

      .#{$contrast-class} & {
        @include input-group-color(
          $background-color: $input__background--success,
          $border-color: $input__border-color--success--contrast,
          $background-color-hover: $input__background--success,
          $color-message: $input__font-color--success--contrast
        );
      }

      .#{$dark-class} &,
      &.#{$input__class}-group--dark {
        @include input-group-color(
          $background-color: $input__background--success--dark,
          $border-color: $input__border-color--success--dark,
          $background-color-hover: $input__background--hover--success--dark,
          $color-message: $input__font-color--success--dark
        );

        .#{$contrast-class} & {
          @include input-group-color(
            $background-color: $input__background--success--dark--contrast,
            $border-color: $input__border-color--success--dark--contrast,
            $background-color-hover:
              $input__background--hover--success--dark--contrast,
            $color-message: $input__font-color--success--dark--contrast
          );
        }
      }

      .#{$input__class}__messages {
        display: inline-flex;

        &:before {
          @include icon-check-circle_16;
        }
      }
    }
  }

  // Filled - Contrast
  .#{$contrast-class}.#{$client-class},
  .#{$contrast-class} .#{$client-class},
  .#{$contrast-class} .#{$input__class--filled} {
    .#{$input__class},
    &.#{$input__class} {
      @include input-color(
        $color: $input__font-color--filled--contrast,
        $color-placeholder: $input__font-color--placeholder--filled--contrast,
        $background-color: $input__background--filled--contrast,
        $background-color-hover: $input__background--filled--contrast
      );
    }

    .#{$input__class}-group {
      &.error {
        @include input-group-color(
          $background-color: $input__background--error--filled--contrast,
          $border-color: $input__background--error--filled--contrast
        );
      }
    }

    .#{$input__class}-group {
      &.warning {
        @include input-group-color(
          $background-color: $input__background--warning--filled--contrast,
          $border-color: $input__background--warning--filled--contrast
        );
      }
    }

    .#{$input__class}-group {
      &.success {
        @include input-group-color(
          $background-color: $input__background--success--filled--contrast,
          $border-color: $input__background--success--filled--contrast
        );
      }
    }
  }

  // Filled - Contrast - Dark
  .#{$contrast-class}.#{$client-class}.#{$dark-class},
  .#{$contrast-class}.#{$client-class} .#{$dark-class},
  .#{$contrast-class} .#{$client-class}.#{$dark-class},
  .#{$contrast-class} .#{$dark-class} .#{$input__class--filled},
  .#{$contrast-class} .#{$input__class--filled} .#{$dark-class},
  .#{$contrast-class} .#{$input__class--filled}.#{$dark-class} {
    .#{$input__class},
    &.#{$input__class} {
      @include input-color(
        $color: $input__font-color--filled--dark--contrast,
        $color-placeholder:
          $input__font-color--placeholder--filled--dark--contrast,
        $background-color: $input__background--filled--dark--contrast,
        $background-color-hover: $input__background--filled--dark--contrast
      );
    }

    .#{$input__class}-group {
      &.error {
        @include input-group-color(
          $background-color: $input__background--error--filled--dark--contrast,
          $border-color: $input__background--error--filled--dark--contrast,
          $color-message: $input__font-color--error--filled--dark--contrast
        );
      }
    }

    .#{$input__class}-group {
      &.warning {
        @include input-group-color(
          $background-color: $input__background--warning--filled--dark--contrast,
          $border-color: $input__background--warning--filled--dark--contrast,
          $color-message: $input__font-color--warning--filled--dark--contrast
        );
      }
    }

    .#{$input__class}-group {
      &.success {
        @include input-group-color(
          $background-color: $input__background--success--filled--dark--contrast,
          $border-color: $input__background--success--filled--dark--contrast,
          $color-message: $input__font-color--success--filled--dark--contrast
        );
      }
    }
  }

  .#{$input__class}__help-text {
    @include input__help-text();
  }

  .#{$input__class}__messages {
    display: none;
    margin-left: rem-calc(16);
    font-size: $input__font-size-message;
    line-height: $input__line-height-message;

    @include vr-spacing(pt, 0.25);

    &:before {
      float: left;
      font-family: $icon-font-name;
      font-size: $input__line-height-message;
    }

    .message {
      line-height: $input__line-height-message;

      @include vr-spacing(ml, 0.4);
    }
  }

  .#{$input__class}__icon-container {
    position: relative;

    @include flex($fd: column);

    .#{$input__class} {
      width: 100%;
      padding-right: rem-calc(36);
    }

    .#{$prefix}-button--icon,
    .#{$prefix}-icon {
      position: absolute;
      top: rem-calc(11);
      z-index: $input__focus-z-index + 1;
    }

    .#{$prefix}-input__icon,
    .#{$prefix}-button--icon {
      right: rem-calc(11);
      left: auto;

      @include input-clear-color;

      .#{$prefix}-icon {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
      }

      .#{$dark-class} &,
      .#{$input__class}-group--dark & {
        @include input-clear-color(
          $input-clear-icon__color--dark,
          $input-clear-icon__color--hover--dark
        );
      }
    }
  }

  .#{$input__class}--nested {
    &-1 {
      @include vr-spacing(ml, 2);
    }

    &-2 {
      @include vr-spacing(ml, 4);
    }

    &-3 {
      @include vr-spacing(ml, 6);
    }
  }
}

/**
* @component input
* @section text-input
*
* @html
*   <div class="cui-input-group medium-5 columns">
*     <label for="text">Text Input</label>
*     <input class="cui-input" id="text" name="text" type="text" placeholder="Placeholder Text">
*   </div>
*
*   <div class="cui-input-group medium-5 columns">
*     <label for="email">Email Input</label>
*     <input class="cui-input" id="email" name="email" type="email" placeholder="Placeholder Text">
*   </div>
*
*   <div class="cui-input-group medium-5 columns">
*     <label for="number">Number Input</label>
*     <input class="cui-input" id="number" name="number" type="number" placeholder="Placeholder Text">
*   </div>
*
*   <div class="cui-input-group medium-5 columns">
*     <label for="password">Password Input</label>
*     <input class="cui-input" id="password" name="password" type="password" placeholder="Placeholder Text">
*   </div>
*
*   <div class="cui-input-group medium-5 columns">
*     <label for="tel">Telephone Input</label>
*     <input class="cui-input" id="tel" name="tel" type="tel" placeholder="Placeholder Text">
*   </div>
*
*   <div class="cui-input-group medium-5 columns">
*     <label for="url">Url Input</label>
*     <input class="cui-input" id="url" name="url" type="url" placeholder="Placeholder Text">
*   </div>
*/

/**
* @component input
* @section default
*
* @html
*   <div class="cui-input-group medium-6 columns">
*     <label class="cui-label" for="normalInput">Label</label>
*     <input class="cui-input" id="normalInput" type="text" placeholder="Placeholder Text">
*   </div>
*   <div class="cui-input-group medium-6 columns cui-input--filled">
*     <label class="cui-label" for="normalInput">Label</label>
*     <input class="cui-input" id="normalInput" type="text" placeholder="Placeholder Text">
*   </div>
*/

/**
* @component input
* @section error
*
* @html
*   <div class="cui-input-group medium-6 columns error">
*     <label class="cui-label" for="errorInput">Label</label>
*     <input class="cui-input" id="errorInput" type="text" placeholder="Placeholder" value="Error">
*     <div class="cui-input__messages">
*       <div class="message">This is where the error message would be.</div>
*     </div>
*   </div>
*/

/**
* @component input
* @section warning
*
* @html
*   <div class="cui-input-group medium-6 columns warning">
*     <label class="cui-label" for="warningInput">Label</label>
*     <input class="cui-input" id="warningInput" type="text" placeholder="Placeholder" value="Warning">
*     <div class="cui-input__messages">
*       <div class="message">This is where the warning message would be.</div>
*     </div>
*   </div>
*/

/**
* @component input
* @section success
*
* @html
*   <div class="cui-input-group medium-6 columns success">
*     <label class="cui-label" for="successInput">Label</label>
*     <input class="cui-input" id="successInput" type="text" placeholder="Placeholder" value="Success">
*     <div class="cui-input__messages">
*       <div class="message">This is where the success message would be.</div>
*     </div>
*   </div>
*/

/**
* @component input
* @section disabled
*
* @html
*   <div class="cui-input-group medium-6 columns disabled">
*     <label class="cui-label" for="disabledInput">Label</label>
*     <input class="cui-input" id="disabledInput" type="text" placeholder="Placeholder" disabled>
*   </div>
*/

/**
* @component input
* @section read-only
*
* @html
*   <div class="cui-input-group medium-6 columns">
*     <label class="cui-label" for="readonlyInput">Label</label>
*     <input class="cui-input" id="readonlyInput" type="text" value="Read Only Text" readonly>
*   </div>
*/

/**
* @component input
* @section help-text
*
* @html
*   <div class="cui-input-group medium-6 columns">
*     <label class="cui-label" for="helpTextInput">Label</label>
*     <input class="cui-input" id="helpTextInput" type="password" placeholder="Placeholder" aria-describedby="helpText">
*     <p class="cui-input__help-text" id="helpText">This is help text for the HTML only input.</p>
*   </div>
*/

/**
* @component input
* @section secondary-label
*
* @html
* <div class="cui-input-group medium-4 columns end">
*   <label class="cui-label" for="secondaryLabelInput">Label</label>
*   <div class="cui-label__secondary-label-container">
*     <input class="cui-input" id="secondaryLabelInput" name="secondaryLabelInput" type="text" placeholder="Placeholder Text">
*     <label class="cui-label__secondary-label for="secondaryLabelInput">
*       <span class="cui-input__secondary-label">Secondary Label</span>
*     </label>
*   </div>
* </div>
*/

/**
* @component input
* @section text-area
*
* @html
*   <div class="cui-input-group medium-5 columns">
*     <label for="textArea">Text Area</label>
*     <textarea  class="cui-input" id="textArea" name="textArea" rows="10" placeholder="Placeholder Textarea"></textarea>
*   </div>
*/

/**
* @component input
* @section validation
*
* @html
* <form name="myFormHtml" novalidate>
*   <div class="row">
*     <div class="cui-input-group medium-6 columns error">
*       <label for="firstName">Error Input</label>
*       <input class="cui-input" id="firstName" name="firstName" type="text" placeholder="Placeholder" minlength="5" maxlength="10" required>
*       <p class="cui-input__help-text">Possible errors include: required, min length = 5 and max length = 10</p>
*       <div class="cui-input__messages" role="alert">
*         <div class="message">This field is required</div>
*       </div>
*       <div class="cui-input__messages" role="alert">
*         <div class="message">Your field is too short</div>
*       </div>
*       <div class="cui-input__messages" role="alert">
*         <div class="message">Your input is WAAAAY too long!</div>
*       </div>
*     </div>
*   </div>
* </form>
*/

/**
* @component input
* @section nested
*
* @html
* <form name="nestedCheckboxForm">
*   <div class="row">
*     <div class="cui-input-group medium-4 columns">
*       <label class="cui-label" for="input-parent"><span>Parent Input Example</span></label>
*       <input type="input" cui-input id="input-parent" name="input-parent" class="cui-input">
*     </div>
*   </div>
*   <div class="row">
*     <div class="cui-input-group medium-4 columns cui-input--nested-1">
*       <label class="cui-label" for="inputNested1"><span>Child Input Nested 1 Level</span></label>
*       <input type="input" cui-input id="inputNested1" name="inputNested1" class="cui-input">
*     </div>
*   </div>
*   <div class="row">
*     <div class="cui-input-group medium-4 columns cui-input--nested-2">
*       <label class="cui-label" for="inputNested2"><span>Child Input Nested 2 Levels</span></label>
*       <input type="input" cui-input id="inputNested2" name="inputNested2" class="cui-input">
*     </div>
*   </div>
*   <div class="row">
*     <div class="cui-input-group medium-4 columns cui-input--nested-3">
*       <label class="cui-label" for="inputNested3"><span>Child Input Nested 3 Levels</span></label>
*       <input type="input" cui-input id="inputNested3" name="inputNested3" class="cui-input">
*     </div>
*   </div>
* </form>
*/


/**
* @component input
* @section clear
*
* @html
<div class="cui-input-group medium-6 columns">
  <label class="cui-label" for="clearInput">Input with clear</label>
  <div class="cui-input__icon-container">
    <input type="text" class="cui-input dirty" tabIndex="0" value="Press or click the clear icon to clear this input" id="clearInput" name="clearInput" placeholder="Placeholder Text">
    <button class="cui-button cui-button--36 cui-button--icon" alt="clear input" type="button" tabIndex="0">
      <span class="cui-button__children" style="opacity: 1;">
        <i class="icon icon-clear-active_16"></i>
      </span>
    </button>
  </div>
</div>
*/