/* forminput.st.css */
@namespace "FormInput";

:import {
  -st-from: "../../components/FormLabel/formlabel.st.css";
  -st-default: FormLabel;
}

:import {
  -st-from: "../../components/FormHelpText/formhelptext.st.css";
  -st-default: FormHelpText;
}

:import {
  -st-from: "../../components/FormErrorMessage/formerrormessage.st.css";
  -st-default: FormErrorMessage;
}

:import {
  -st-from: '../../mixins/formElements.st.css';
  -st-named:
    formInputText,
    formInputFocus,
    formInputHover,
    /* All disabled inputs */
    formInputDisabled,
    /* Checkbox */
    formInputCheckbox,
    formInputCheckboxChecked,
    formInputCheckboxCheckedDisabled,
    /* Switch */
    formInputSwitch,
    formInputSwitchChecked,
    formInputSwitchDisabled,
    formInputSwitchCheckedDisabled,
    /* Radio */
    formInputRadio,
    formInputRadioChecked,
    formInputRadioDisabled;
}

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

:import {
  -st-from: "../../mixins/boxShadowFocus.st.css";
  -st-default: BoxShadowFocus;
}

.root {
  -st-states:
    type(string),
    disabled;
}

.label {
  -st-extends: FormLabel;
}

.input {}

.button {}

.color {}

.date {}

.datetimeLocal {}

.disabled {}

.file {}

.hidden {}

.image {}

.month {}

.number {}

.password {}

.range {}

.reset {}

.search {}

.submit {}

.tel {}

.time {}

.url {}

.week {}

/* Apply hover style to input elements and labels. For specificity reasons they are on the top */
.checkbox:hover,
.radio:hover,
.switch:hover,
.root:type(checkbox)::label:hover,
.root:type(radio)::label:hover,
.root:type(switch)::label:hover {
  -st-mixin: formInputHover;
}

/** Chrome specific fix, otherwise input background turns bluish when input is filled. */
.root .text:-webkit-autofill,
.root .text:-webkit-autofill:hover,
.root .text:-webkit-autofill:focus,
.root .email:-webkit-autofill,
.root .email:-webkit-autofill:hover,
.root .email:-webkit-autofill:focus {
  -st-mixin: formInputTextInsetBoxShadow;
}

/* Checkbox, Radio etc. Labels, error message and help text */
/* Due to the different position of the form elements flex had to be used */
.root:type(checkbox),
.root:type(radio),
.root:type(switch) {
  -ms-box-orient: horizontal;
  display: flex;
  justify-content: start;
  flex-flow: row wrap;
  align-items: flex-start;
}

.root:type(checkbox) .label,
.root:type(radio) .label,
.root:type(switch) .label {
  order: 3;
  flex: 1;
}

.root:type(checkbox) FormHelpText,
.root:type(radio) FormHelpText,
.root:type(switch) FormHelpText {
  flex: 1 100%;
  order: 1;
}

.root:type(checkbox) FormErrorMessage,
.root:type(radio) FormErrorMessage,
.root:type(switch) FormErrorMessage {
  order: 4;
  flex: 1 100%;
}