@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime"], input[type="tel"], textarea, textarea.form-control {
  @include form-field;

  &::-webkit-input-placeholder {
    color: var(--swatches-secondary-700);
  }

  &:-ms-input-placeholder {
    color: var(--swatches-secondary-700);
  }

  &::placeholder {
    color: var(--swatches-secondary-700);
  }

  &:focus {
    &::-webkit-input-placeholder {
      color: var(--swatches-secondary-200);
    }

    &:-ms-input-placeholder {
      color: var(--swatches-secondary-200);
    }

    &::placeholder {
      color: var(--swatches-secondary-200);
    }
  }
}

textarea, textarea.form-control {
  height: auto;
  transition: box-shadow 0.2s ease;
  max-width: 100%;
}

[data-browser="chrome"] textarea {
  padding-left: 10px;
}