@import '@legends/styles/base.scss';

.wrapper {
  display: flex;
  flex-direction: column;
}

.label,
.input {
  font-family: $primaryFont;
  font-weight: 400;
}

.label {
  color: $tertiaryText;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.25rem;
}
.input {
  height: 3.4375rem;
  padding: 1rem 2rem;
  font-size: 0.875rem;
  border: 1px solid $primaryBorder;
  border-radius: $primaryBorderRadius;
  color: $secondaryText;
  background-color: $neutral-900;
  font-weight: 300;

  &::placeholder {
    color: $tertiaryText;
    font-weight: 200;
  }

  &:focus::placeholder {
    color: transparent;
  }

  &.error {
    border-color: $error;
  }
}
.validationMessage,
.infoLabel {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.validationMessage {
  &.error {
    color: $error;
  }
  &.valid {
    color: $success;
  }
}
.infoLabel {
  color: $secondaryText;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}
