$form-field-outline: 0;
$form-field-padding: 7px 9px;
$form-field-margin: 0;
$form-field-width: 100%;
$form-field-max-width: 100%;
$form-field-vertical-align: bottom;
$form-field-text-align: inherit;
$underline-form-field-border: 1px solid #9c9c9c;
$standard-form-field-border: 1px solid #c8c8c8;
$form-field-color: #333333;
$form-field-color-placeholder: #666666;
$form-field-disabled-color: #9c9c9c;
$form-field-disabled-value-color: #9b9b9b;
$form-field-disabled-border: #e4e4e4;
$form-field-disabled-background: #f9f9f9;
$form-field-box-sizing: border-box;
$form-field-font-size: 14px;
$form-field-height: 40px;
$form-field-textarea-height: 64px;
$form-field-textarea-line-height: 22px;
$form-field-line-height: 22px;
$form-field-default-background: #fff;
$form-field-transition-border: border 0.5s;
$oui-error: #ff001f;
$form-field-textarea-resize: vertical;
$form-field-textarea-padding: 9px 10px;
@mixin oui-form-field-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  .oui-form-field {
    @include oui-form-field-base();
    @include oui-form-field-theme-palette($theme);
  }
  .oui-form-field-appearance-standard {
    @include oui-form-field-appearance-standard-theme-palette($theme);
  }
  .oui-form-field-appearance-underline {
    @include oui-form-field-appearance-underline-theme-palette($theme);
  }
}

/* Common properties in all form field*/
@mixin oui-form-field-base() {
  .oui-input {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    outline: $form-field-outline;
    padding: $form-field-padding;
    margin: $form-field-margin;
    width: $form-field-width;
    max-width: $form-field-max-width;
    vertical-align: $form-field-vertical-align;
    text-align: $form-field-text-align;
    color: $form-field-color;
    box-sizing: $form-field-box-sizing;
    font-size: $form-field-font-size;
    height: $form-field-height;
    line-height: $form-field-line-height;
    background: $form-field-default-background;
    font-weight: normal;
    transition: $form-field-transition-border;
    &::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: $form-field-color-placeholder;
    }
    &::-moz-placeholder {
      /* Firefox 19+ */
      color: $form-field-color-placeholder;
    }
    &:-ms-input-placeholder {
      /* IE 10+ */
      color: $form-field-color-placeholder;
    }
    &:-moz-placeholder {
      /* Firefox 18- */
      color: $form-field-color-placeholder;
    }
    &:disabled {
      border-color: $form-field-disabled-border;
      resize: none;
    }
    &:disabled {
      border-color: $form-field-disabled-border;
      background-color: $form-field-disabled-background;
      color: $form-field-disabled-value-color;
    }
    &:disabled::-webkit-input-placeholder {
      color: $form-field-disabled-color;
    }
    &:disabled:-moz-placeholder {
      color: $form-field-disabled-color;
    }
    &:disabled::-moz-placeholder {
      color: $form-field-disabled-color;
    }
    &:disabled:-ms-input-placeholder {
      color: $form-field-disabled-color;
    }
    &::-ms-clear,
    &::-ms-reveal {
      display: none;
    }
  }
  textarea.oui-input {
    min-height: $form-field-textarea-height;
    min-width: $form-field-width;
    line-height: $form-field-textarea-line-height;
    padding: $form-field-textarea-padding;
    resize: $form-field-textarea-resize;
    height: auto;
  }
}

/* Generating themes for oui-form-field(Standard form fields) */
@mixin oui-form-field-theme-palette($theme) {
  $primary: map-get($theme, primary);
  .oui-input {
    border: $standard-form-field-border;
    &:focus {
      border-color: map-get($primary, default);
    }
  }
  .oui-error {
    color: $oui-error;
    display: block;
    padding-top: 6px;
    font-size: 14px;
    line-height: 22px;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  }
}

/* Generating themes for oui-form-field-appearance-standard(standard form-fields)*/
@mixin oui-form-field-appearance-standard-theme-palette($theme) {
}

/* Generating themes for oui-form-field-appearance-underline(underline form-fields)*/
@mixin oui-form-field-appearance-underline-theme-palette($theme) {
  $primary: map-get($theme, primary);
  .oui-input {
    border: none;
    padding-left: 1px;
    padding-right: 1px;
    border-bottom: $underline-form-field-border;
    transition: border 0.5s, padding 0.5s;
    &:disabled {
      color: #666666;
      background-color: transparent;
      border-color: #cbcbcb;
    }
    &:focus {
      border-width: 2px;
      border-color: map-get($primary, default);
      padding-bottom: 6px;
    }
  }
}