/* NÃO REMOVER ESTE ARQUIVO: Feito diretamente pois o gulp não esta funcionando. */

.floating-input__content {
  position: relative;
}

.floating-input__field {
  height: 56px;
  width: 100%;
  padding: var(--b-spacing-lg) 48px var(--b-spacing-sm) var(--b-spacing-md);
  font-size: 16px;
  border: 1px solid #E0E0E0;
  border-radius: var(--b-border-radius);
  background-color: white;
  outline: none;
  transition: border-color var(--b-transition-duration) ease, background-color var(--b-transition-duration) ease;
  box-sizing: border-box;
}

.floating-input__field:hover,
.floating-input__field:focus {
  border-color: var(--b-primary-color);
}

.floating-input__label {
  text-transform: none;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #616161;
  pointer-events: none;
  transition: all var(--b-transition-duration) ease;
}

.floating-input__icon {
  font-size: 18px;
}

.floating-input__icon--visible {
  display: none;
}

/* Label sobe quando tem a classe .is-active */
.floating-input__label.is-active {
  top: 20px;
  font-size: 12px;
  color: var(--b-primary-color);
}

/* Ícone de toggle de senha */
.floating-input__toggle-password {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--b-spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757575;
}

.floating-input__toggle-password:hover {
  color: #424242;
}

.floating-input__toggle-password svg {
  width: 24px;
  height: 24px;
}

/* Variação de erro */
.floating-input__error-message {
  color: var(--b-negative-color);
  font-size: 12px;
  margin-top: var(--b-spacing-xs);
  margin-left: var(--b-spacing-sm);
  display: block;
}

.floating-input.has-error .floating-input__field {
  border-color: var(--b-negative-color);
}

.floating-input.has-error .floating-input__field:focus {
  border-color: var(--b-negative-color);
}

.floating-input.has-error .floating-input__label {
  color: var(--b-negative-color);
}