:root {
  // FORM_FIELD_WRAPPER

  // LABEL
  // --------------

  --dt-form_field_wrapper-label-font_size: 1rem;
  --dt-form_field_wrapper-label-line_height: 1.25rem;


  // LABEL_COMPLEMENT (texte complémentaire du label)
  // ---------------------------------------------------
  --dt-form_field_wrapper-label_complement-color: var(--dt-color-grey_60);
  --dt-font_size-help: 14px;
  --dt-font_weight-help: 400;
  --dt-label-line_height: 16px;
  --dt-label-letter_spacing: 0.15px;
  --dt-text-color_main-ligth: var(--dt-color-grey_400);

  // INPUT
  // ------------------------------
  --dt-input-padding: var(--dt-base-grid);
  --dt-input-background_color-default: var(--dt-color-white);
  --dt-input-color-default: var(--dt-color_main);
  --dt-input-max_width-default: 240px;

  --dt-input-border_width-default: 1px;
  --dt-input-border_color-default: var(--dt-color-grey_60);

  --dt-input-border_width-hover: 1px;
  --dt-input-border_color-hover: var(--dt-color-grey_87);
  --dt-input-border_width-focus: 2px;
  --dt-input-border_color-focus: var(--dt-color-primary);

  --dt-input-border_width-error: 1px;
  --dt-input-border_width-error_default: 1px;
  --dt-input-border_width-error_hover: 2px;
  --dt-input-border_color-error_hover: var(--dt-color-danger);

  // SELECT (.input_select)
  --dt-input_select-padding: 0 1rem 0 0;

  // FIELD_ERROR (erreur s'affichant en dessous des champs)
  // ------------------------------------------------------------
  --dt-form_field_wrapper-field_error-font_size: 14px;
  --dt-form_field_wrapper-field_error-line_height: 16px;

  --dt-form_field_wrapper-field_error-color: var(--dt-color-danger);
  --dt-form_field_wrapper-field_error-margin_top: var(--dt-space-01);

  // Error
  --dt-span-error-color-default: var(--dt-color-danger-text);
  --dt-span-error-color-on_dark_background: var(--dt-color-danger-background);
  --dt-span-alert-height: 41px;
  --dt-span-alert-line_height: 20px;
  --dt-span-alert-margin-top: 7px;
  --dt-span-alert-margin-left: 0px;
  --dt-span-alert-margin-bottom: 7px;
  --dt-span-alert-margin-right: 0px;
  --dt-span-alert-padding-left: 14.47px;
  --dt-span-alert-padding-top: 11px;
  --dt-span-alert-padding-bottom: 8px;
  --dt-span-alert-padding-right: 13px;
  --dt-span-alert-icon-margin-right: 14.47px;
  --dt-span-error_input-margin-right: 0px;
  --dt-span-error_input_icon-size: 22px;
  --dt-span-error_input-icon-margin-top: 0px;
  --dt-span-error_input-icon-margin-right: 9px;
  --dt-span-error_input-letter-spacing: 0.4px;

  // surcharge CHOICE_BUTTON
  // -------------------------------------------------------------

  // TODO : magic values, c'est mal, si on peut faire avec des calculs ça serait mieux

  --dt-choice_button-display-default: inline-flex;
  --dt-choice_button-button-border-radius-default: 4px;

  // ul

  --dt-choice_button-ul-display-default: block;


  // INPUT - RADIO
  // ---------------------------------
  // fond
  --dt-input_radio-fond-border_color-selected: var(--dt-color-primary_500);
  --dt-input_radio-fond-border_color-hover: var(--dt-color-primary_500);

  // point
  // SELECTED
  --dt-input_radio-point-background_color-selected: var(--dt-color-primary_500);



  // Spacing
  --dt-choice_button-space-beetween-check-and-text: 10px;
  --dt-form-space-between-label-input: var(--dt-space-00);

  // Check Design
  --dt-choice-button-button-display-default: block;
  --dt-choice-button-button-visibility-default: visible;
  --dt-choice_button-button-check-line-right-default: 16px;
  --dt-choice_button-button-check-line-left-default: 16px;
  --dt-choice_button-button-check-background-color-default: white;
  --dt-choice_button-button-check-border-color-default: var(--dt-color-primary);

  --dt-choice_button-button-check-border-bottom-default: var(--dt-choice_button-button-check-line-width-default) solid var(--dt-choice_button-button-check-border-color-default);
  --dt-choice_button-button-check-border-left-default: var(--dt-choice_button-button-check-line-width-default) solid var(--dt-choice_button-button-check-border-color-default);
  --dt-choice_button-button-check-border-top-default: var(--dt-choice_button-button-check-line-width-default) solid var(--dt-choice_button-button-check-border-color-default);
  --dt-choice_button-button-check-border-right-default: var(--dt-choice_button-button-check-line-width-default) solid var(--dt-choice_button-button-check-border-color-default);
  --dt-choice_button-button-check-border-radius-default: 50%;

  --dt-choice_button-button-check-transform-default: none;

  // DEFAULT
  --dt-choice_button-button-padding-side-default: 16px;
  --dt-choice_button-button-border-color-default: var(--dt-color-primary);

  // HOVER
  --dt-choice_button-button-background-color-hover: var(--dt-color-primary_50);
  --dt-choice_button-button-box-shadow: none;
  --dt-choice_button-button-border-color-hover: var(--dt-choice_button-button-border-color-default);
  --dt-choice_button-button-background-color-hover: var(--dt-choice_button-button-background-color-default);

  // CHECKED
  --dt-choice_button-button-padding-side-checked: 16px;
  --dt-choice_button-button-check-width-checked: 8px;
  --dt-choice_button-button-check-height-checked: 8px;
  --dt-choice_button-button-check-background-color-checked: var(--dt-color-primary);
  --dt-choice_button-button-check-border-color-checked: white;
  --dt-choice_button-button-border-color-checked: var(--dt-choice_button-button-border-color-default);
  --dt-choice_button-button-background-color-checked: var(--dt-choice_button-button-border-color-default);

  --dt-choice_button-button-check-line-width-checked: 2px;
  --dt-choice_button-button-check-top-checked: 15px;
  --dt-choice_button-button-check-border-bottom-checked: var(--dt-choice_button-button-check-line-width-checked) solid var(--dt-choice_button-button-check-border-color-checked);
  --dt-choice_button-button-check-border-left-checked: var(--dt-choice_button-button-check-line-width-checked) solid var(--dt-choice_button-button-check-border-color-checked);
  --dt-choice_button-button-check-border-top-checked: var(--dt-choice_button-button-check-line-width-checked) solid var(--dt-choice_button-button-check-border-color-checked);
  --dt-choice_button-button-check-border-right-checked: var(--dt-choice_button-button-check-line-width-checked) solid var(--dt-choice_button-button-check-border-color-checked);

}