@import "../../styles/variables.scss";

.container {
  position: relative;
}

.loader {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
}

.textInput {
  height: $base-input-height;
  background-color: $base-input-background;
  border-radius: $base-border-radius;
  border: $base-border;
  font-size: $body-font-size;
  line-height: normal;
  padding: 0 $base-spacing;
  width: 100%;

  &:focus {
    border-color: transparent;
    background: $brand-white;
    box-shadow: 0 0 0 2px $brand-blue;
    outline: none;
  }

  &::placeholder {
    color: $brand-grey;
  }
}

.disabled {
  background-color: $brand-nearWhite;
  border: none;

  &::placeholder {
    color: darken($brand-nearWhite, 10%);
  }
}

.error {
  border-color: transparent;
  box-shadow: 0 0 0 2px $brand-destructive;
  outline: none;
}

.inputHelpText {
  padding-top: $base-spacing;
}