@mixin input-theme($border) {
  $active-border: darken($border, 12%);
  border-color: $border;

  &:focus,
  &.focus {
      border-color: $active-border;
  }

  &:focus,
  &.focus {
    border-color: darken($border, 25%);
    box-shadow:0 0 7px darken($border,.01%);
  }
  
  &.disabled,
  &:disabled {
    cursor: not-allowed;
    &:focus,
    &.focus {
      border-color: $border;
    }
  }

}

@mixin input-size($height, $padding, $font-size, $radius) {
  input, textarea {
    /*height: $height;*/
    line-height: 1.5;
    padding: $padding;
    font-size: $font-size;

    &.radius {
      border-radius: $radius;
    }
  }
}

.ui-input {
  position: relative;
  @include input-size($base-height, 0 0, $base-fontSize,3);

  input, textarea {
    position: relative;
    display: inline-block;
    width: 100%;
    color: #636363;
    background-color: #fff;
    background-image: none;
    border-width: 0;
    // border: 1px solid #d9d9d9;
    outline: 0;
    appearance: none;
    transition: border .2s cubic-bezier(0.645, 0.045, 0.355, 1),
              box-shadow .2s cubic-bezier(0.645, 0.045, 0.355, 1);
    &[type="date"] {
      height: r(21);
    }
    &:focus {
      border-color: #57c5f7;
      outline: 0;
    }


    &.disabled,
    &:disabled {
      cursor: not-allowed;
      /*background-color: #f3f5f7;*/
      
      &:focus,
      &.focus {
        border-color: #ccc;
      }
      &:hover {
        border-color: #ccc;
      }
    } 
  }

  /* Input sizes */
  &.size-xl {
    @include input-size($base-height-xl, 4px 14px, $base-fontSize-xl, r(4));
  }
  &.size-lg {
    @include input-size($base-height-lg, 4px 11px, $base-fontSize-lg, r(3));
  }
  &.size-sm {
    @include input-size($base-height-sm, 4px 7px, $base-fontSize-sm, r(3));
  }
  &.size-xs {
    @include input-size($base-height-xs, 4px 4px, $base-fontSize-xs, r(2));
  }
  /* Button themes */
  /* &.theme-default {
    @include input-theme( $base-btn-default-border);
  }
  &.theme-info {
    @include input-theme($base-btn-info-border);
  }
  &.theme-success {
    @include input-theme($base-btn-success-border);
  }
  &.theme-warning {
    @include input-theme($base-btn-warning-border);
  }
  &.theme-error {
    @include input-theme($base-btn-error-border);
  } */
}

.ui-input-placeholder {
  position: absolute;
  color: #c1c1c1;
}
::-webkit-input-placeholder {
    color:    #bbb;
}
::input-placeholder { 
    color:    #bbb;
}
textarea {
  &.ui-input {
    max-width: 100%;
    height: auto !important;
    line-height: 1.5;
    vertical-align: bottom;
  }
}