// style par défaut d'un bouton (pas de couleur particulière)
.button,
button,
a.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  display: inline-flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  padding: var(--dt-button-padding);
  line-height: var(--dt-button-line_height);
  overflow: visible;
  appearance: none;
  text-align: left;
  text-decoration: none;
  user-select: none;
  font-size: var(--dt-button-font_size-default);
  font-weight: var(--dt-button-font_weight-default);
  border-radius: var(--dt-button-border_radius-default);
  border-style: var(--dt-button-border_style-default);
  border-width: var(--dt-button-border_width-default);
  font-family: var(--dt-font_family-main);
  color: inherit;

  // marge minimal afin que l'on puisse voir l'outline lors du focus
  margin: var(--dt-space-00);

  &:focus,
  &:hover {
    text-decoration: none;
    cursor: pointer;

  }

  &:active {
    opacity: 1;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  // lorsqu'il y a des icones dans le button
  img,
  svg {
    padding: 0;
    width: auto;
    margin-right: var(--dt-space-02);
  }

  &.--button_icon_right {
    img,
    svg {
      margin-right: 0;
      margin-left: var(--dt-space-02);
    }
  }
}
// TODO voir avec geremy pour color_alt primaire/secondaire + distingo focus/hover + img svg padding

.button {
  min-height: var(--dt-button-min_height-default);
  

  &.--button_primary {
    // Button par défaut
    color: var(--dt-button_primary-text-color-default);
    border-color: var(--dt-button_primary-border_color-default);
    background: var(--dt-button_primary-background_color-default);
    box-shadow: var(--dt-button_primary-shadow);

    &:focus,
    &:hover {
      color: var(--dt-button_primary-text-color-hover);
      border-color: var(--dt-button_primary-border_color-hover);
      background: var(--dt-button_primary-background_color-hover);
      box-shadow: var(--dt-button_primary-shadow-hover);
    }
  }

  // Button secondaire
  &.--button_secondary {
    color: var(--dt-button_secondary-text-color-default);
    border-color: var(--dt-button_secondary-border_color-default);
    background: var(--dt-button_secondary-background_color-default);

    &:focus{
      color: var(--dt-button_secondary-text-color-focus);
      border-color: var(--dt-button_secondary-border_color-focus);
      background: var(--dt-button_secondary-background_color-focus);
    
    }
    &:hover {
      color: var(--dt-button_secondary-text-color-hover);
      border-color: var(--dt-button_secondary-border_color-hover);
      background: var(--dt-button_secondary-background_color-hover);
    }
  }

  // Button tertiaire
  &.--button_tertiary {
    color: var(--dt-button_tertiary-text-color-default);
    border-color: var(--dt-button_tertiary-border_color-default);
    background: var(--dt-button_tertiary-background_color-default);

    &:focus,
    &:hover {
      color: var(--dt-button_tertiary-text-color-hover);
      border-color: var(--dt-button_tertiary-border_color-hover);
      background: var(--dt-button_tertiary-background_color-hover);
    }

    &.--button_ghost {
      color: var(--dt-button_tertiary-button_ghost-text-color-default);
      border-color: var(--dt-button_tertiary-button_ghost-border_color-default);
      background: var(--dt-button_tertiary-button_ghost-background_color-default);

      &:focus,
      &:hover {
        color: var(--dt-button_tertiary-button_ghost-text-color-hover);
        border-color: var(--dt-button_tertiary-button_ghost-border_color-hover);
        background: var(--dt-button_tertiary-button_ghost-background_color-hover);
      }

      &.--button_color_danger {
        color: var(--dt-button_tertiary-button_color_danger-button_ghost-text-color-default);

        &:focus,
        &:hover {
          color: var(--dt-button_tertiary-button_color_danger-button_ghost-text-color-hover);
        }
      }
    }
  }

  // pas de padding sur les bords pour ces boutons
  &.--button_ghost {
    user-select: text;
    padding-right: var(--dt-button-button_text-padding-side);
    padding-left: var(--dt-button-button_text-padding-side);
    font-weight: normal;

    &:hover,
    &:focus {
      text-decoration: var(--dt-button_tertiary-button_ghost-text_decoration-hover);
    }

    // Le cas des images dans les button_ghost ont moins d'espace
    img,
    svg {
      padding: 0;
      width: auto;
      margin-right: var(--dt-space-01);
    }

    &.--button_icon_right {
      img,
      svg {
        margin-right: 0;
        margin-left: var(--dt-space-01);
      }
    }
  }
}