.choice_button {
  display: var(--dt-choice_button-display-default);
  width: auto;
  flex-direction: column;

  ul {
    align-items: flex-start;
  }

  // permet d'avoir les boutons aligné à l'horizontal
  &.--choice_button_alignement_horizontal ul {
    flex-direction: row;
  }

  li {
    margin-right: var(--dt-choice_button-space-beetween-buttons);
    padding: var(--dt-choice_radio-li-padding);
  }




  input[type="checkbox"],
  input[type="radio"] {
    display: block;
    opacity: 0;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    z-index: -1;

    

    // INIT
    // warning : input avant le label
    &+label {
      position: relative;

      display: flex;
      flex-direction: row;

      user-select: none;
      cursor: pointer;

      padding: var(--dt-choice_button-button-padding-top-bottom-default) var(--dt-choice_button-button-padding-side-default);

      background-color: var(--dt-choice_button-button-background-color-default);
      border: 1px var(--dt-choice_button-button-border-color-default) solid;

      // NEW POUR INTRANET
      border-radius: var(--dt-choice_button-button-border-radius-default);

      color: var(--dt-choice_button-button-text-color-default);
      transition: color ease-out 300ms;

      font-size: var(--dt-form_field_wrapper-label-font_size);
      line-height: inherit;


      &:before,
      &:after {
        position: relative;
        border-radius: 0;
        visibility: hidden;
        display: none;
      }



      // ERREURS
      &.--error {
        border: var(--dt-input-border_width-error) solid var(--dt-color-danger-input);
      }

      &.--error:before {
        border-color: var(--dt-color-danger-input) !important;
      }


      // la check devant le label
      &:before {
        top: auto;
        bottom: auto;
        right: auto;
        left: auto;

        display: var(--dt-choice-button-button-display-default);
        visibility: var(--dt-choice-button-button-visibility-default);
        content: '';
        margin-right: var(--dt-choice_button-space-beetween-check-and-text);

        // Construction de la check
        width: var(--dt-choice_button-button-check-line-right-default);
        height: var(--dt-choice_button-button-check-line-left-default);
        background-color: var(--dt-choice_button-button-check-background-color-default);
        //border-color: var(--dt-choice_button-button-check-border-color-default);
        border-bottom: var(--dt-choice_button-button-check-border-bottom-default);
        border-left: var(--dt-choice_button-button-check-border-left-default);
        border-top: var(--dt-choice_button-button-check-border-top-default);
        border-right: var(--dt-choice_button-button-check-border-right-default);
        transform: var(--dt-choice_button-button-check-transform-default);
        border-radius: var(--dt-choice_button-button-check-border-radius-default);

        // permet d'avoir la check centré après rotation
        margin-top: var(--dt-choice_button-button-check-line-trick-for-alignement);


      }


      // Hover
      &:hover {
        color: var(--dt-choice_button-button-text-color-hover);
        border-color: var(--dt-choice_button-button-border-color-hover);
        box-shadow: var(--dt-choice_button-button-box-shadow);

        background-color: var(--dt-choice_button-button-background-color-hover);
      }

    }



    // FOCUS
    &:focus+label {

      box-shadow: var(--dt-choice_button-button-box-shadow);

    }


    // CHECKED
    &:checked+label {
      padding: var(--dt-choice_button-button-padding-top-bottom-checked) var(--dt-choice_button-button-padding-side-checked);
      color: var(--dt-choice_button-button-text-color-checked);
      background-color: var(--dt-choice_button-button-background-color-checked);
      border: 1px solid var(--dt-choice_button-button-border-color-checked);
      box-shadow: 0 0 0 1px var(--dt-choice_button-button-border-color-checked) inset;

      &:hover::before,
      &:before {
        display: block;
        visibility: visible;
        width: var(--dt-choice_button-button-check-line-right-default);
        height: var(--dt-choice_button-button-check-line-left-default);
        background-color: var(--dt-choice_button-button-check-background-color-checked);
        border-color: var(--dt-choice_button-button-check-border-color-checked);
        border-bottom: var(--dt-choice_button-button-check-border-bottom-checked);
        border-left: var(--dt-choice_button-button-check-border-left-checked);
        border-top: var(--dt-choice_button-button-check-border-top-checked);
        border-right: var(--dt-choice_button-button-check-border-right-checked);
        border-radius: var(--dt-choice_button-button-check-border-radius-default);
      }

      &:after {
        display: none;
        visibility: hidden;
      }


    }


  }

  // DISABLED
  input[type="checkbox"],
  input[type="radio"]:disabled +label {
    background-color:  var(--dt-color-disabled-light);
    border-color: var(--dt-color-disabled-dark);

    &:before {
      border-color: var(--dt-color-disabled-dark);
    }
            
  }



}