@import '../../../styles/variables';

.textInputContainer {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;

  input::placeholder {
    color: var(--input-placeholder);
  }

  label {
    font-weight: bold;
    font-family: var(--font-gotham-bold);
    font-size: 12px;
    text-transform: uppercase;
    opacity: var(--input-label-opacity);
    color: var(--input-label);
    margin-bottom: 10px;
  }

  .textInput {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    height: $text-input-height;
    border: 2px solid var(--input-background);
    border-radius: $text-input-border-radius;
    background: var(--input-background);
    position: relative;

    &.active {
      @include active-input;
    }

    &.error {
      border: 2px solid var(--input-error);
      border-top-right-radius: 3px;
      border-top-left-radius: 3px;
    }

    .errorIcon {
      color: var(--input-error);
      position: absolute;
      right: 8px;
      top: 10px;
    }

    .errorMessage {
      background-color: var(--input-error);
      color: #fff;
      position: absolute;
      top: 39px;
      left: -2px;
      width: 100%;
      font-size: 0.7rem;
      padding: 5px 2px;
      border-radius: 3px;
      z-index: 9999;
      text-align: center;
    }

    .beforeInput {
      flex: 0 1 auto;
    }
  }
}

.input {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  height: $text-input-height;
  line-height: $text-input-height;
  color: var(--input-text);
  background: var(--input-background);
  font-size: $text-input-font-size;
}

.afterInput {
  flex: 0 1 auto;
}
