@st-namespace 'Input-st-css';
@st-import [ --wix-color-1, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont ] from '../../common/formatters.st';
@st-import [ errorColor ] from '../../common/palette.st.css';
@st-import Input from '../internal/WixUiCoreComponents/components/CoreInput/CoreInput.st.css';

/*
 * Border color
 * @type color
 */
@property st-global(--wix-ui-tpa-input-main-border-color);

/*
 * Background color
 * @type color
 */
@property st-global(--wix-ui-tpa-input-main-background-color);

/*
 * Text color
 * @type color
 */
@property st-global(--wix-ui-tpa-input-main-text-color);

/*
 * Text font
 * @type font
 */
@property st-global(--wix-ui-tpa-input-main-text-font);

.inputStyling {
    /*This abstraction is useful to make containers have same styling as input. e.g. Autocomplete*/
    box-sizing: border-box;
    border: 1px solid createColor(--wix-ui-tpa-input-main-border-color, var(--wix-color-5), 0.6);
    border-radius: 0;
    transition: border-color .1s ease-in;
    background-color: createColor(--wix-ui-tpa-input-main-background-color, var(--wix-color-1));
    -st-mixin: createFont(--wix-ui-tpa-input-main-text-font, 'Body-M', '{ "size": "16px" }');
}

.root {
    --color: createColor(--wix-ui-tpa-input-main-text-color, var(--wix-color-5));
    --colorPlaceholder: createColor(--wix-ui-tpa-input-main-text-color, var(--wix-color-5), 0.6);
    --backgroundColor: createColor(--wix-ui-tpa-input-main-background-color, var(--wix-color-1));
    --borderColor: createColor(--wix-ui-tpa-input-main-border-color, var(--wix-color-5), 0.6);
    --borderWidth: 1px;
    --borderRadius: 0;
    --border: var(--borderWidth) solid var(--borderColor);

    /*Hover*/
    --colorHover: createColor(--wix-ui-tpa-input-main-text-color, var(--wix-color-5));
    --backgroundColorHover: createColor(--wix-ui-tpa-input-main-text-color, var(--wix-color-5), 0.05);
    --borderColorHover: var(--borderColor);

    /*Focus*/
    --colorFocus: createColor(--wix-ui-tpa-input-main-text-color, var(--wix-color-5));
    --backgroundColorFocus: createColor(--wix-ui-tpa-input-main-background-color, var(--wix-color-1));
    --borderColorFocus: var(--borderColor);

    /*Disabled*/
    --disabledOpacity: 0.3;
    --colorDisabled: createColor(--wix-ui-tpa-input-main-text-color, var(--wix-color-5), var(--disabledOpacity));
    --backgroundColorDisabled: createColor(--wix-ui-tpa-input-main-background-color, var(--wix-color-1), var(--disabledOpacity));
    --borderColorDisabled: createColor(--wix-ui-tpa-input-main-border-color, var(--wix-color-5), var(--disabledOpacity));

    -st-extends: Input;
    -st-states: error;
    -st-mixin: inputStyling;
}

.root:hover {
    border-color: var(--borderColorHover);
}

.root:disabled {
    border-color: var(--borderColorDisabled);
}

.root:focus {
    border-color: var(--borderColorFocus);
}

.root:error {
    border-color: value(errorColor);
}

.root::nativeInput {
    width: 100%;
    -st-mixin: createFont(--wix-ui-tpa-input-main-text-font, 'Body-M', '{ "size": "16px" }');
    line-height: 24px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    color: var(--color);
    box-sizing: border-box;
    background-color: var(--backgroundColor);
}

.root:hover::nativeInput {
    color: var(--colorHover);
    background-color: var(--backgroundColorHover);
}

.root:disabled::nativeInput {
    color: var(--colorDisabled);
    background-color: var(--backgroundColorDisabled);
}

.root:focus::nativeInput {
    outline: 0;
    color: var(--colorFocus);
    background-color: var(--backgroundColorFocus);
}

.root::nativeInput::selection {
    background: createColor(--wix-ui-tpa-input-main-text-color, var(--wix-color-5), 0.2);
}

/* Placeholder color */
.root::nativeInput::-webkit-input-placeholder,
.root::nativeInput::-moz-placeholder,
.root::nativeInput:-moz-placeholder,
.root::nativeInput:-ms-input-placeholder {
    color: var(--colorPlaceholder);
}

/* st-namespace-reference="../../../../src/components/Input/Input.st.css" */