.input {
  composes: accessibilityOutline from "./Focus.css";
  composes: border pill sizeLg from "./Borders.css";
  composes: borderBox from "./Layout.css";
  composes: Text from "./Text.css";
  composes: fontSize300 from "./Typography.css";
  composes: xsCol12 from "./Column.css";
  appearance: none;
  background-color: var(--color-background-formfield-primary);
  color: var(--color-text-formfield-default);
  min-width: 180px;
  padding: var(--space-200) calc(var(--space-800) + var(--space-200));
}

.input::-webkit-search-decoration,
.input::-webkit-search-cancel-button,
.input::-webkit-search-results-button,
.input::-webkit-search-results-decoration {
  appearance: none;
}

.input:focus {
  cursor: text;
}

.input::-ms-clear {
  display: none;
}

.input::placeholder {
  color: var(--color-text-formfield-placeholder);
}

html:not([dir="rtl"]) .inputActive {
  padding: var(--space-200) var(--space-800) var(--space-200) var(--space-400);
}

html[dir="rtl"] .inputActive {
  padding: var(--space-200) var(--space-400) var(--space-200) var(--space-800);
}

.inputHovered {
  composes: borderColorLightGrayHovered from "./Borders.css";
  composes: pointer from "./Cursor.css";
}

.clear {
  composes: marginEnd200 from "./boxWhitespace.css";
  composes: paddingX100 from "./boxWhitespace.css";
  composes: paddingY100 from "./boxWhitespace.css";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

html:not([dir="rtl"]) .clear {
  right: var(--space-0);
}

html[dir="rtl"] .clear {
  left: var(--space-0);
}