.button,
button,
a.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  &.--button_icon_left {
    [class^="material-icons"] {
      margin-right: 6px;
      vertical-align: middle;
    }
  }

  &.--button_icon_right {
    [class^="material-icons"] {
      margin-left: 6px;
      vertical-align: middle;
    }
  }
}

.button {
  font-weight: var(--dt-button-font-weight);

  &.--button_primary {
    &.--color_alt {
      color: var(--dt-button_primary_alt-text-color-default);
      border-color: var(--dt-button_primary_alt-border_color-default);
      background: var(--dt-button_primary_alt-background_color-default);

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

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

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

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

  &.--button_ghost {
    display: inline-block;
    &:hover,
    &:focus {
      [class^="material-icons"] {
        text-decoration: none;
      }
    }
  }
}