@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

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(--theme-color-secondary-intensed);
  }
  &:-ms-input-placeholder {
    color: var(--theme-color-secondary-intensed);
  }
  &::placeholder {
    color: var(--theme-color-secondary-intensed);
  }

  &:focus {
    &::-webkit-input-placeholder {
      color: var(--theme-color-secondary-dimmed);
    }
    &:-ms-input-placeholder {
      color: var(--theme-color-secondary-dimmed);
    }
    &::placeholder {
      color: var(--theme-color-secondary-dimmed);
    }
  }
}

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

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