@import 'react-rg-designsystem/style/variables.scss';

.InputField {
  display: flex;
  flex-direction: column;
  width: 100%;

  &__error {
    margin-top: 4px;
    font-size: 12px;
    color: var(--error-zero-base);
    line-height: 1.4;
    text-align: left;
  }

  .RGInputField {
    input {
      border-radius: 3px !important;
    }
  }

  &.invalid {
    .RGInputField {
      input {
        box-shadow: 0 0 4px var(--error-zero-base) !important;
      }

      input:focus {
        box-shadow: 0 0 4px var(--error-zero-base) !important;
      }
    }
  }
}