@import '../../styles/colors-v2.css';
@import "../../styles/spacing.css";
@import "../../styles/typography-v2.css";

/* TODO: Deprecate in favor of control/input.css */

.input {
  border: 1px solid var(--mds-grey-12);
  border-radius: 3px;
  box-sizing: border-box;
  font: var(--mds-type-content);
  height: var(--spacing-x-large);
  margin: 0;
  padding: 0 var(--spacing-x-large) 0 var(--spacing-medium);
  width: 100%;
}

.input::placeholder {
  color: var(--mds-grey-54);
}

.input:read-only {
  background-color: var(--mds-grey-3);
}

.invalid-icon {
  box-sizing: border-box;
  pointer-events: none;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

/*
  An input only looks invalid after user interaction.
  The first time render will _look_ valid while it is internally invalid for a11y purposes.
  i.e. Do not implement `.input:invalid`.
*/
.invalid-input {
  composes: input;
  border-color: var(--mds-red-100);
}

.invalid-input:hover {
  border-color: var(--mds-red-100);
}