const textFont = (props) =>
  props.theme.get("TextInput.textFont") ??
  props.theme.get("Input.textFont") ??
  props.theme.get("TextFont.default") ??
  "inherit";

const textColor = (props) =>
  props.theme.getColor("TextInput.textColor") ??
  props.theme.getColor("Input.textColor") ??
  props.theme.getColor("Color.primary") ??
  "inherit";

const textSize = (props) =>
  props.theme.getUnit("TextInput.textSize") ??
  props.theme.getUnit("Input.textSize") ??
  props.theme.getUnit("TextSize.1") ??
  "inherit";

const textLine = (props) =>
  props.theme.getUnit("TextInput.textLine") ??
  props.theme.getUnit("Input.textLine") ??
  props.theme.getUnit("TextLine.1") ??
  null;

const paddingX = (props) =>
  props.theme.getUnit("TextInput.paddingX") ??
  props.theme.getUnit("Input.paddingX") ??
  props.theme.getUnit("Space.1") ??
  null;

const paddingY = (props) =>
  props.theme.getUnit("TextInput.paddingX") ??
  props.theme.getUnit("Input.paddingX") ??
  props.theme.getUnit("Space.1") ??
  null;

export const Input = styled.input`
  font-family: ${textFont};
  line-height: ${textLine};
  font-size: ${textSize};
  color: ${textColor};

  padding: ${paddingX} ${paddingY};
`;