.input {
  width: 100%;
  background-color: transparent;
  color: #000000;
  font-size: inherit;
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 500;
  text-align: center;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed #000000;
  cursor: pointer;

  &:focus {
    background-color: #c9d6df;
    border: 0;
    outline: 0;
  }
}

.invalid {
  outline: 2px solid red;
  border-bottom: 0;

  &:focus {
    outline: 2px solid red;
  }
}

.input {
  width: 100%;
  background-color: transparent;
  color: #000000;
  font-size: inherit;
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 500;
  text-align: center;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed #000000;
  cursor: pointer;

  &:focus {
    background-color: #c9d6df;
    border: 0;
    border-bottom: 2px solid #00bd00;
    outline: 0;

    &.invalid {
      border-bottom: 2px solid #ff0000;
    }
  }
}

Update invalid state style for inputs
Update invalid state style for inputs
