:import {
  -st-from: "./Input.st.css";
  -st-named: Input;
}

:import {
  -st-from: "../../colors.st.css";
  -st-named: 
  R10,
}

:import {
  -st-from: "wix-ui-core/dist/src/mixins/calc";
  -st-default: calc;
}

:vars {
  largeFont: 22px;
  medFont: 16px;
  smallFont: 14px;

  largeHeight: 60px;
  medHeight: 36px;
  smallHeight: 30px;
}

.input-error {
  color: value(R10);
  border-color: value(R10);
}

.input-large {
  -st-extends: Input;
}

.input-large::nativeInput {
  height: value(largeHeight);
  line-height: calc(value(largeHeight) - 2px);
  font-size: value(largeFont);
}

.input-medium {
  -st-extends: Input;
}

.input-medium::nativeInput {
  height: value(medHeight);
  line-height: calc(value(medHeight) - 2px);
  font-size: value(medFont);
}

.input-small {
  -st-extends: Input;
}

.input-small::nativeInput {
  height: value(smallHeight);
  line-height: calc(value(smallHeight) - 2px);
  font-size: value(smallFont);
}