$timing: 120ms;
$top-padding: 1.25rem;

%nio-text-input {
  display: block;
  position: relative;
  padding-top: $top-padding;
}

%nio-text-input--common {
  color: $palette-black;
  height: 1rem * 2.5;
  border-radius: 0.5rem;
  border: 1px solid $palette-light;
  outline: 0;
  padding-left: 0.5rem;
  box-sizing: border-box;
  font: inherit;

  &:focus {
    border-color: $palette-primary;
  }
}

%nio-text-input--singleline {
  @extend %nio-text-input--common;
  width: 100%;
}

%nio-text-input--multiline {
  @extend %nio-text-input--common;
  display: block;
  height: 1rem * 2.5 * 2; // twice singleline height, TODO: change this and others to distance variable
  resize: vertical;
  width: 100%;
}

%nio-text-input__label {
  display: block;
  position: absolute;
  font-size: $font-size-medium;
  top: ((1rem * 2.5) / 2 + $top-padding);
  left: 1rem;
  transform: translatey(-50%);
  color: $palette-light;
  opacity: 1;
  transition: top $timing, left $timing, font-size $timing, color $timing, opacity $timing;
  pointer-events: none;
}

%nio-text-input__label--with-value {
  top:  $top-padding / 2;
  left: 0.75rem;
  font-size: $font-size-small;
  color: $palette-zinc;
  transition: none;
}

%nio-text-input__label--with-focus {
  top:  $top-padding / 2;
  left: 0.75rem;
  font-size: $font-size-small;
  color: $palette-primary;
}

%nio-text-input__helper {
  color: $palette-zinc;
  display: block;
  font-size: $font-size-small;
  text-align: right;
  padding-right: 0.5rem;
}