@value ( varBackgroundLightContrast ) from "~@xo-union/tk-ui-colors/lib/variables.css";
@value ( var-sp-down-4, var-sp-down-2 ) from "~@xo-union/tk-css-spacing/lib/variables.css";
@value ( container ) from "../../css/container.css";
@value ( sub-text ) from "../../css/sub-text.css";
@value ( is-neutral, is-valid, is-invalid ) from "../../css/validations.css";
@value horizontal-spacing: calc(var-sp-down-4 + var-sp-down-2);
.input {
  composes: field-base from "../../css/field-base.css";
  composes: ease-out from "../../css/animation.css";
  composes: input-with-animated-label from "../../css/animated-label.css";
  border-radius: var(--tkww-union-fields-select-input-border-radius, 2px);
  height: 3rem;
  padding: 15px horizontal-spacing 0;
  transition-property: border-color;
}
.input:disabled {
  background-color: var(--tkww-union-fields-input-disabled-background-color, varBackgroundLightContrast);
  cursor: not-allowed;
}
.input[type=button] {
  cursor: pointer;
}

.input-container {
  position: relative;
}

.label {
  composes: animated-label from "../../css/animated-label.css";
  cursor: text;
}