@import '../_variables.scss';

.el-input {

  &__inner {
    font: {
      family:$font-family;
      size:1rem;
      weight: normal;
    }
    border-radius: 0.625rem;
    color: $grey;
    border-color:$lineColor1;
    //margin-top: 0.5rem;  
    height: 2.5rem;
    max-width:100%;
    width:20rem;

    &:hover {
      border-color: $lightGrey !important;
    }
    &:focus {
      background: $cochlear;
      border-color: $grey !important;
    }
    &::placeholder {
      font-style: italic;
      color: $lineColor1;
    }
  }

  &.secondary {
    .el-input__inner {
      border-color:  $lineColor2;
    }
  }
 
  &__suffix {
    display: flex;
  }
  &__suffix-inner {
    align-items: center;
    display: flex;
  }
  &.is-disabled {
    .el-input__inner {
      border-color: $lineColor2;
      color: $mediumGrey;
    }
  }
}

.el-input--small .el-input__inner {
  border-radius:  0.625rem;   
  font-size: 0.875rem;
  padding: 0 0.75rem;
}
.el-input--suffix .el-input__inner {
  padding-right: 2.25rem;
}
.el-form-item.is-error {
  .el-input__inner,
  .el-input__inner:focus,
  .el-textarea__inner,
  .el-textarea__inner:focus {
    border-color: $danger;
  }
  .el-input__suffix-inner {
    color: $danger;
  }
}
.el-form-item.is-success {
  .el-input__inner,
  .el-input__inner:focus,
  .el-textarea__inner,
  .el-textarea__inner:focus {
    border-color: $success;
  }
  .el-input__suffix-inner {
    color: $success;
  }
}

.el-input-number__increase,
.el-input-number__decrease {
  margin-top: .5rem;
}

.el-input-number.is-controls-right .el-input-number__increase,
.el-input-number.is-controls-right .el-input-number__decrease,
.el-input-group__prepend,
.el-input-group__append {
  border-color: $lightGrey;
  color: $mediumGrey;
}

.text-and-link.el-input--suffix .el-input__inner {
  padding-right: 5rem;
}
.el-input__suffix-inner a {
  border-left: 1px solid $lightGrey;
  color: $grey;
  padding-left: 0.625rem;
}
.el-input__icon {
  color: $lightGrey;
}

.el-textarea{
  &__inner {
    border-radius: 0.625rem;
    font: {
      family:$font-family;
      size:1rem;
    }
    width:100%;
    max-width:43rem;
    //margin-top: 0.5rem;
    &::placeholder {
      font-style: italic;
      color: $lineColor1;
    }
  } 
}

//For Steppers
.el-input-number__decrease{
  border-radius: 0.625rem 0 0 0.625rem;
}
.el-input-number__increase{
  border-radius: 0 0.625rem 0.625rem 0;
}