:import {
  -st-from: "wix-ui-core/index.st.css";
  -st-named: Input;
}

:import {
  -st-from: "../../colors.st.css";
  -st-named: 
    B20, B30, B40, B50,
    D10, D50, D55, D60,
    GR20,
    R10,
    WHITE
}

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

:import {
  -st-from: "./InputStates.st.css";
  -st-named: input-large, input-medium, input-small;
}

/* Input colors */
:vars {
  inputBackground: value(WHITE);
  inputBorderColor: value(B30);
  inputHover: value(B50);
  inputFocusBorderColor: value(B20);
  inputDisabledColor: value(D55);
  inputDisabledBorderColor: value(D60);
  inputDisabledHoverBorderColor: value(GR20);
}

.root {
  -st-extends: Input;
  -st-states: size(enum(large, medium, small));

  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  color: value(D10);
  width: 100%;
  border-radius: 6px;
  border: 1px solid value(inputBorderColor);
  background-color: value(inputBackground);
  padding: 0 6px;
}

.root:error,
.root:error:focus {
  border-color: value(R10);
}

.root:hover {
  background-color: value(inputHover);
}

.root:disabled {
  background-color: inherit;
}

.root:disabled {
  color: value(inputDisabledColor);
  border-color: value(inputDisabledBorderColor);
}

.root:disabled::nativeInput {
  color: value(inputDisabledColor);
}

.root:focus {
  border-color: value(inputFocusBorderColor);
}

.root::nativeInput {
  background-color: transparent;
  outline: none;
  width: 100%;
  font-family: value(fontRoman);
  border: none;
  padding: 0 6px;
}

.root::nativeInput::-webkit-input-placeholder { color: value(D50); }
.root::nativeInput:-moz-placeholder           { color: value(D50); }
.root::nativeInput::-moz-placeholder          { color: value(D50); }
.root::nativeInput:-ms-input-placeholder      { color: value(D50); }

.root::nativeInput::selection                 { background: value(B40); }
.root::nativeInput:-moz-selection             { background: value(B40); }

.root:size(large) {
  -st-mixin: input-large;
}

.root:size(medium) {
  -st-mixin: input-medium;
}

.root:size(small) {
  -st-mixin: input-small;
}