/* formElements.st.css Mixin */
:import {
  -st-from: "../themes/base/project.st.css";
  -st-default: Base;
  -st-named:
    --base-font-size,
    --color-background-main,
    --color-focus,
    --color-form-accent,
    --color-low-contrast,
    --color-mid-contrast,
    --color-high-contrast,
    --spacing-unit,
    --svg-checkbox-checked,
    --svg-checkbox-checked-disabled,
    --svg-switch-default,
    --svg-switch-checked,
    --svg-switch-disabled,
    --svg-switch-checked-disabled,
    --svg-radio-checked,
    --svg-radio-disabled,
    --svg-select,
    --svg-select-disabled;
}

/* Other Mixins */
:import {
  -st-from: "./hideWebkitAppearance.st.css";
  -st-named: hideWebkitAppearance;
}

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

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

:vars {
  /**
   * Generic proxy vars. 
   * The 5 main colours are defined below, more specific vars
   * are assigned to these.
   *
   * Override a proxy on use:
   * -st-mixin: formInputText(mid-contrast pink);
   * or/and specific values:
   * -st-mixin: formInputText(mid-contrast pink, form-input-disabled-color yellow);
   */
  low-contrast: var(--color-low-contrast);
  mid-contrast: var(--color-mid-contrast);
  high-contrast: var(--color-high-contrast);
  accent: var(--color-form-accent);
  item-background: var(--color-background-main);
  /* Spacing */
  spacing-unit: var(--spacing-unit);
  /* Low Contrast */
  form-input-disabled-color: value(low-contrast);
  form-checkbox-border-color: value(low-contrast);
  form-checkbox-border-checked-color: value(low-contrast);
  form-checkbox-border-checked-disabled-color: value(low-contrast);
  form-radio-border-color: value(low-contrast);
  form-switch-border-color: value(low-contrast);
  /* Mid Contrast */
  /* --form-input-placeholder-color: value(mid-contrast);*/
  form-input-border-color: value(mid-contrast);
  form-radio-border-disabled: value(mid-contrast);
  form-switch-border-disabled-color: value(mid-contrast);
  form-switch-border-checked-disabled-color: value(mid-contrast);
  /* High Contrast */
  /* --form-help-text-color: value(high-contrast); */
  form-input-text-color: value(high-contrast);
  /* Accent */
  form-input-focus-border-color: value(high-contrast);
  form-radio-border-checked-color: value(accent);
  form-switch-border-checked-color: value(accent);
  /* Background */
  form-checkbox-background-color: value(item-background);
  form-radio-background-color: value(item-background);
  form-switch-background-color: value(item-background);
  form-select-background-color: value(item-background);
}

/** CAUTION: Check CampaignMonitor AND input components after updating this file. */
/* Text inputs text areas etc */
.formInputText {
  /* Hide the default appearance */
  -st-mixin: hideWebkitAppearance;
  /* Spacing */
  padding: 20px calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 4);
  display: block;
  width: 100%;
  /* Border */
  border-width: 1px;
  border-style: solid;
  border-color: value(form-input-border-color);
  border-radius: 2px;
  /* Shadow */
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  /* Fonts */
  font-size: var(--base-font-size);
  color: value(form-input-text-color);
}

/* Text inputs text areas etc hover and focus effetcs */
.formInputFocus {
  border-color: value(form-input-focus-border-color);
  box-shadow: inset 0 0 0 1px value(form-input-focus-border-color);
  -webkit-box-shadow: inset 0 0 0 1px value(form-input-focus-border-color);
  -moz-box-shadow: inset 0 0 0 1px value(form-input-focus-border-color);
  outline-offset: 0;
  outline: 3px solid var(--color-focus);
}

/* Text inputs, checkboxes etc hover effect */
.formInputHover {
  cursor: pointer;
}

/* Checkbox :default */
.formInputCheckbox {
  /* Hide the default appearance, apply light gradient and boxshadow */
  -st-mixin: hideWebkitAppearance, formInputGradient, formInputBoxShadow;
  /* Spacing */
  padding: 0;
  margin: 0 12px 0 0;
  outline: none;
  /* Background */
  /* Shouldn't really need a background-color since it's using the formInputGradient, needed for iphones */
  background-color: value(form-checkbox-background-color);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: left 50% bottom 50%;
  /* Dimensions */
  width: 24px;
  height: 24px;
  /* Border */
  border-width: 1px;
  border-style: solid;
  border-color: value(form-checkbox-border-color);
  border-radius: 2px;
}

/* :selected State */
.formInputCheckboxChecked {
  background-image: var(--svg-checkbox-checked);
  border-color: value(form-checkbox-border-checked-color);
}

/* :checked:disabled state */
.formInputCheckboxCheckedDisabled {
  background-image: var(--svg-checkbox-checked-disabled);
  border-color: value(form-checkbox-border-checked-disabled-color);
}

/* Switch */
.formInputSwitch {
  /* Hide the default appearance and add boxshadow */
  -st-mixin: hideWebkitAppearance, formInputBoxShadow;
  /* Spacing */
  padding: 0;
  margin: 0 12px 0 0;
  outline: none;
  /* Background */
  /* Shouldn't really need a background-color since it's using the formInputGradient, needed for iphones */
  background-color: value(form-switch-background-color);
  background-image: var(--svg-switch-default);
  background-repeat: no-repeat;
  background-position: left 50% bottom 50%;
  /* Dimensions */
  width: 44px;
  height: 24px;
  /* Border */
  border-width: 1px;
  border-style: solid;
  border-color: value(form-switch-border-color);
  border-radius: 12px;
}

/* :checked state */
.formInputSwitchChecked {
  background-image: var(--svg-switch-checked);
  border-color: value(form-switch-border-checked-color);
}

/* :disabled state with switch off */
.formInputSwitchDisabled {
  background-image: var(--svg-switch-disabled);
  border-color: value(form-switch-border-disabled-color);
}

/* :checked:disabled state */
.formInputSwitchCheckedDisabled {
  background-image: var(--svg-switch-checked-disabled);
  border-color: value(form-switch-border-checked-disabled-color);
}

/* Radio */
.formInputRadio {
  /* Hide the default appearance and apply light gradient */
  -st-mixin: hideWebkitAppearance, formInputGradient, formInputBoxShadow;
  /* Spacing */
  padding: 0;
  margin: 0 12px 0 0;
  outline: none;
  /* Background */
  /* Shouldn't really need a background-color since it's using the formInputGradient, needed for iphones */
  background-color: value(form-radio-background-color);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: left 50% bottom 50%;
  /* Dimensions */
  width: 24px;
  height: 24px;
  /* Border */
  border-width: 1px;
  border-style: solid;
  border-color: value(form-radio-border-color);
  border-radius: 50%;
}

.formInputRadioChecked {
  background-image: var(--svg-radio-checked);
  border-color: value(form-radio-border-checked-color);
}

.formInputRadioDisabled {
  background-image: var(--svg-radio-disabled);
  border-color: value(form-radio-border-disabled);
}

/* FormSelect - DropDown. Please use formInputText mixin alongside for the box borders shadows etc. */
.formSelect {
  /* Background */
  background-image: var(--svg-select);
  background-color: value(form-select-background-color);
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: right 18px top 50%;
}

.formSelectDisabled {
  background-image: var(--svg-select-disabled);
}

/* Generic can be applied to all form elements here */
/* :disabled state for all input elements */
.formInputDisabled {
  background-color: value(form-input-disabled-color);
  background-image: none;
  /* For some form elements */
  cursor: not-allowed;
}