$input-bg: #fff !default;

.text-input {
  font-family: $font-family-sans-serif;
  background-color: $input-bg;
  width: 100%;
  min-height: 36px;
  padding: $input-btn-padding-y $input-btn-padding-x;
  color: $dark;
  border: 1px solid $light-gray-2;
  border-radius: $border-radius;
  transition: all .2s ease;
  line-height: 1.1;

  &:focus,
  &:active {
    border-color: $primary;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba($primary,.25);
  }

  &-wrapper svg[hidden] {
    display: none;
  }

  &.skeleton {
    @include skeleton;

    max-width: 200px;
    height: 36px;
  }
}

.text-input::-webkit-input-placeholder {
  color: $light-gray-1;
}

//-----------------------------
// State icon spacing
//-----------------------------
.text-input__field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;

  .text-input__invalid-icon {
    position: absolute;
    top: 10px;
    font-size: 16px;
    right: $spacing-sm;
    color: $danger;
  }

  .text-input__valid-icon {
    position: absolute;
    top: 10px;
    font-size: 16px;
    right: $spacing-sm;
    color: $success;
  }
}
//-----------------------------
// Disabled
//-----------------------------
.text-input:disabled {
  cursor: not-allowed;
  outline: none;
  background-color: $light-gray-2;
  border: 1px solid $light-gray-1;
  color: $dark-gray-3;
}

.text-input:disabled::placeholder {
  opacity: 1;
  color: lighten($light-gray-1, .1); //TODO
}

//-----------------------------
// Error
//-----------------------------
.text-input--invalid {
  box-shadow: none;
  border-color: $danger;
  padding-right: 2rem;

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

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba($danger,.25);
  }
}

//-----------------------------
// Valid
//-----------------------------
.text-input--valid {
  box-shadow: none;
  border-color: $success;
  padding-right: 2rem;

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

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba($success,.25);
  }
}