/* DEPRECATED: should be removed after consistent use of input component */

.g-input {
  border: 0;
  border: 1px solid;
  border-radius: 2px;
  color: var(--input-placeholder-color);
  font-size: 1rem;
  padding: 12px;
  outline: 0;

  &[type='email']::placeholder,
  &[type='text']::placeholder {
    color: var(--input-placeholder-color);
  }

  &.light {
    background-color: var(--input-background-light);
    border-color: var(--input-border-light);
  }
  &.dark {
    background-color: var(--input-background-dark);
    border-color: var(--input-border-dark);
    color: var(--input-placeholder-color-dark);

    &[type='email']::placeholder,
    &[type='text']::placeholder {
      color: var(--input-placeholder-color-dark);
    }
  }
}