// style d'une checkbox
input[type="checkbox"] {
  display: block;
  position: absolute;
  cursor: default;
  opacity: 0;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;

  // Text en gris pour donner des détails sur le label
  // vient strictement après le label
  ~ .label_complement {
    display: block;
    padding-left: var(--dt-input_checkbox-space_between_checkbox_and_label_plus_checkbox);
    margin-top: calc(var(--dt-font_size-base-calc) / 2 * -1px);
    @media (min-width: $media-query-min-width) {
      margin-top: calc(var(--dt-font_size-base-calc) / 2 * -1px);
    }
  }

  & + label {
    cursor: pointer;
    position: relative;
    width: 100%;
    display: block;
    padding: var(--dt-input_checkbox-label-padding-mobile);
    @media (min-width: $media-query-min-width) {
      padding: var(--dt-input_checkbox-label-padding-desktop);
    }
    &:hover {
      color: var(--dt-input-color-hover);
    }
  }

  // fond + check
  & + label::before,
  & + label::after {
    content: '';
    display: block;
    position: absolute;
  }

  // fond
  & + label::before {
    top: var(--dt-input_checkbox-fond-distance_top-mobile);
    @media (min-width: $media-query-min-width) {
      top: var(--dt-input_checkbox-fond-distance_top-desktop);
    }
    left: var(--dt-input_checkbox-fond-distance_left);
    border: var(--dt-input_checkbox-border_color-default) var(--dt-input_checkbox-border_width) solid;
    width: var(--dt-input_checkbox-square);
    height: var(--dt-input_checkbox-square);
    appearance: none;
    background-color: var(--dt-input_checkbox-background_color);
  }

  // check
  & + label::after {
    top: var(--dt-input_checkbox-check-distance_top-mobile);
    @media (min-width: $media-query-min-width) {
      top: var(--dt-input_checkbox-check-distance_top-desktop);
    }
    left: var(--dt-input_checkbox-check-distance_left);

    display: none;
    visibility: hidden;
    content: '';

    // Construction de la check
    width: var(--dt-input_checkbox-check-line_right-default);
    height: var(--dt-input_checkbox-check-line_left-default);
    border-bottom: var(--dt-input_checkbox-check-line_width-default) solid var(--dt-input_checkbox-check-color-default);
    border-left: var(--dt-input_checkbox-check-line_width-default) solid var(--dt-input_checkbox-check-color-default);
    transform: rotateZ(-45deg);
  }

  // HOVER
  & + label:hover {
    // fond
    &::before {
      border-width: var(--dt-input_checkbox-check-line_width-hover);
      border-color: var(--dt-input_checkbox-border_color-hover);
    }

    // check
    &::after {
      display: block;
      visibility: visible;
      opacity: var(--dt-input_checkbox-opacity-hover);
    }
  }

  // SELECTED
  &:hover:checked + label,
  &:checked + label {
    // fond
    &::before {
      border-color: var(--dt-input_checkbox-border_color-checked);
    }

    // check
    &::after {
      opacity: 1;
      display: block;
      visibility: visible;
      border-left-color:var(--dt-input_checkbox-border_color-checked);
      border-right-color:var(--dt-input_checkbox-border_color-checked);
    }
  }
}