.text-input-component {
  /* display */
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;

  /* positioning */
  /* box-model */
  min-height: 1.75em;
  width: 100%;

  /* typography */
  --current-color: var(--theme-secondary-color);

  /* manipulation */
  /* misc */
  overflow: hidden;
}

.text-input-component:focus-within {
  --current-color: var(--theme-primary-color);
}

.text-input-component .text-input-label {
  /* display */
  /* positioning */
  /* box-model */
  max-width: 100%;

  /* typography */
  color: var(--current-color);
  font-family: var(--header-font-family);
  font-weight: 300;
  font-size: 0.5em;
  line-height: 1;

  /* manipulation */
  transition: 0.25s linear transform;
  transform: scale(1.9);
  transform-origin: top left;
  /* misc */
}

.text-input-component .text-input-wrapper {
  /* display */
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;

  /* positioning */
  /* box-model */
  min-height: 0.5em;
  line-height: 0;
  max-width: 100%;

  /* typography */
  /* manipulation */
  /* misc */
}

.text-input-component .text-input {
  /* display */
  display: flex;
  flex-flow: row nowrap;
  flex: 1 1 auto;

  /* positioning */

  /* box-model */
  max-height: 0;
  border: none;
  border-bottom: 1px solid var(--current-color);
  background-color: transparent;

  /* typography */
  font-family: inherit;
  font-size: inherit;
  text-overflow: ellipsis;

  /* manipulation */
  transition: 0.25s linear max-height;

  /* misc */
}

.text-input-component .show-hide-password {
  display: none;
}

.text-input-component .password ~ .show-hide-password {
  /* display */
  display: initial;
  flex: 0 0 auto;

  /* positioning */
  /* box-model */
  background-color: transparent;
  font-size: inherit;
  border-bottom: 1px solid var(--current-color);
  max-height: 0;

  /* typography */
  color: initial;

  /* manipulation */
  transition: 0.25s linear max-height;
  overflow-y: hidden;

  /* misc */
}

.text-input-component .error-message {
  font-size: 0.5em;
  visibility: hidden;
}

.text-input-component.invalid {
  color: var(--invalid-color);
  --current-color: var(--invalid-color);
}

.text-input-component.invalid .error-message {
  visibility: visible;
}

.text-input-component .password ~ .show-hide-password:focus span {
  color: var(--theme-secondary-color);
}

.text-input-component .password ~ .show-hide-password .show-password,
.text-input-component .password ~ .show-hide-password .hide-password {
  display: initial;
}

.text-input-component
  .password[type="password"]
  ~ .show-hide-password
  .hide-password,
.text-input-component
  .password:not([type="password"])
  ~ .show-hide-password
  .show-password {
  display: none;
}

.text-input-component:focus-within .text-input-label,
.text-input-component.not-empty .text-input-label {
  /* typography */

  /* manipulation */
  transform: scale(1);
  /* misc */
}

.text-input-component:focus-within .text-input,
.text-input-component.not-empty .text-input,
.text-input-component:focus-within .show-hide-password,
.text-input-component.not-empty .show-hide-password {
  /* display */
  /* positioning */
  /* box-model */
  max-height: 1.25em;

  /* typography */
  /* manipulation */
  outline: none;
  /* misc */
}