@use 'forms';
@use '../colours';
@use '../accessibility';
@use '../layout';

.wrapper {
  align-items: normal;
  display: flex;
  flex-grow: 1;
  margin: 0.5em 0 0;
  width: 100%;
}

.inputContainer {
  margin-top: layout.$spacing-height;
  min-width: 1em;
  width: 100%;
}

.inputLabel {
  display: block;
}

.input {
  border: colours.$input-border;
  border-radius: colours.$border-radius;
  flex-grow: 1;
  min-width: 1em;
  padding: 0.5em;
  text-overflow: ellipsis;

  @include forms.standard-input-dimensions;

  &:disabled {
    border-color: colours.$mid-grey;
    color: colours.$mid-grey;
  }

  &:not(:disabled) {
    &:read-write {
      @include accessibility.interactive($focus-color-change-percentage: 0%);
    }

    &:read-only {
      &:focus {
        @include accessibility.focus;
      }
    }
  }
}

.hasButton {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.containerError {
  border-left: 5px solid colours.$error;
  padding-left: 1em;
}

.error {
  outline: layout.$outline-size solid colours.$error;
  z-index: layout.$focus-index;
}

.errorMessage {
  color: colours.$error;
  font-weight: bold;
  margin: 0.5em 0;
}
