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

.input {
  composes: input from "../input/input.css";
  padding: 0 calc(var(--spacing-x-large) + var(--spacing-large)) 0 var(--spacing-medium);
}

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

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

.invalid-input {
  composes: invalid-input from "../input/input.css";
  composes: input;
}

.percent-sign {
  color: var(--mds-grey-38);
  font: var(--mds-type-content);
  user-select: none;
}