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

:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --spacing-unit,
    --color-mid-contrast;
}

/* = Import Root Component CSS API */
:import {
  -st-from: "../../components/FormInput/forminput.st.css";
  -st-default: FormInput;
}

/* = Import Sub Components */
:import {
  -st-from: "../../components/FormHelpText/formhelptext.st.css";
  -st-default: FormHelpText;
}

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

/* = Import Mixins */
: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;
}

@st-scope Base {
  FormInput {
    position: relative;
  }

  FormInput::label {}

  FormInput::text,
  FormInput::email,
  FormInput::password,
  FormInput::number,
  FormInput::url,
  FormInput::month,
  FormInput::date,
  FormInput::time,
  FormInput::week,
  FormInput::search,
  FormInput::tel {
    -st-mixin: formInputText;
  }

  /* Disabled applied to all inputs */
  FormInput input:disabled {
    -st-mixin: formInputDisabled;
  }

  FormInput:disabled .label {
    color: var(--color-mid-contrast);
    cursor: not-allowed;
  }

  FormInput:disabled FormHelpText {
    color: var(--color-mid-contrast);
  }

  /* Apply focus style to all input elements */
  FormInput::input:focus {
    -st-mixin: formInputFocus;
  }

  /* Checkbox, Radio etc. Labels, error message and help text */
  /* Due to the different position of the form elements flex had to be used */
  FormInput:type(checkbox),
  FormInput:type(radio),
  FormInput:type(switch) {
    margin-bottom: calc(var(--spacing-unit) * 3);
  }

  /* Form Input Checkbox */
  /* Default */
  FormInput::checkbox {
    -st-mixin: formInputCheckbox;
    order: 2;
  }

  /* Selected / Checked */
  FormInput::checkbox:checked {
    -st-mixin: formInputCheckboxChecked;
  }

  /* Disabled checked checkbox */
  FormInput::checkbox:checked:disabled {
    -st-mixin: formInputCheckboxCheckedDisabled;
  }

  /* Form Input Radio */
  FormInput::radio {
    order: 2;
    -st-mixin: formInputRadio;
  }

  /* Selected / Checked */
  FormInput::radio:checked {
    -st-mixin: formInputRadioChecked;
  }

  /* Disabled checked radio */
  FormInput::radio:checked:disabled {
    -st-mixin: formInputRadioDisabled;
  }

  /* Form Input Switch */
  FormInput::switch {
    -st-mixin: formInputSwitch;
    order: 2;
  }

  FormInput::switch:checked {
    -st-mixin: formInputSwitchChecked;
  }

  /* :focus */
  FormInput::checkbox:focus,
  FormInput::radio:focus,
  FormInput::switch:focus {
    -st-mixin: BoxShadowFocus;
  }

  /* Switch :disabled */
  FormInput::switch:disabled {
    -st-mixin: formInputSwitchDisabled;
  }

  /* Disabled checked switch */
  FormInput::switch:checked:disabled {
    -st-mixin: formInputSwitchCheckedDisabled;
  }

  FormInput:type(checkbox)::label,
  FormInput:type(radio)::label,
  FormInput:type(switch)::label {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
  }
}

@media value(tablet) {
  @st-scope Base {

    FormInput:type(checkbox)::label,
    FormInput:type(radio)::label,
    FormInput:type(switch)::label {
      font-size: 1rem;
    }
  }
}