/* Button theme function */

.button-theme(
  @primary, // Border and Hover background color.
  @background, // Background color
  @text, // Text color (on light background),
  @light-text, // Light text color (on dark background),
  @border, // Border color
  @disabled-background, // Disabled background color
  @disabled-text // Disabled text color.
  ) {

  color: if(
    luma($background-color) < 50,
    @light-text,
    @text
  );
  border-color: @border;
  background-color: @background;

  button:not(:disabled) &,
  &:not(:disabled),
  [type=button]:not(:disabled) &,
  [type=reset]:not(:disabled) &,
  [type=submit]:not(:disabled) &,
  button:not(:disabled) & {

    &:hover,
    &.is-hover,
    &:active,
    &.is-active,
    &[data-active='true'] {
      background-color: @primary;
      border-color: @primary;
      /* Set text color based on luma of background color */
      color: if(
        luma($background-color) < 50,
        @light-text,
        @text
      );
    }

    &:focus,
    &.is-focus {
      box-shadow: 0 0 0 0.16em tint(@primary, 60%);
    }
  }

  &:disabled,
  &[data-disabled="true"],
  &.is-disabled {
    border-color: fadeout(@border, 60%);
    color: @disabled-text;
    background-color: fadeout(@disabled-background, 60%);
    color: if(
      luma($background-color) < 50,
      lighten(@text, 40%),
      lighten(@background, 40%)
    );

    & when (@color-scheme[dark] = true) {
      @media (prefers-color-scheme: dark) {
        color: if(
          luma($background-color) < 50,
          darken(@text, 40%),
          darken(@background, 40%)
        );
      }
    }
  }
}

/* Add pointer to button */

button:not(:disabled),
.button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

/* Reset margins */

[type=button],
button {
  margin: 0;
}

/* Main button class */

.button {
  text-decoration: none;
  // Property is ignored due to the display. With 'display: block', vertical-align should not be used.less(propertyIgnoredDueToDisplay)
  // //vertical-align: middle;
  user-select: none;

  display: block;
  position: relative;

  background-color: transparent;

  border-width: 1px;
  border-style: solid;
  border-radius: 0.2em;

  font-size: 1em;
  white-space: nowrap;

  margin: 0.25em;
  padding: 0.3em 0.5em;

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;

  line-height: @typography[base-line-height];
  font-weight: bold;

  /*----------- Utilities -----------*/

  &-inline {
    display: inline;
    vertical-align: baseline;
  }

  &-inline-block {
    display: inline-block;
    vertical-align: baseline;
  }

  &-block {
    display: block;
    // Property is ignored due to the display. With 'display: block', vertical-align should not be used.
    // //vertical-align: baseline;
  }

  &-unmarged {
    margin: 0px;
  }

  /*----------- Shapes -----------*/

  &-square {
    border-radius: 0px;
    padding: 0.4em 0.6em;
  }

  &-circle {
    border-radius: 50%;
    height: 2.3em;
    width: 2.3em;
    padding: 0.4em;
    text-align: center;
    vertical-align: middle;

    i {
      margin: 0px;
      padding: 0px;
      vertical-align: middle;
    }
  }

  &-tag {
    border-radius: 2px;

    &-strict {
      /* Disable all status styles */
      pointer-events: none;
    }
  }

  /*----------- Element states -----------*/

  &:disabled,
  &[data-disabled="true"],
  &.is-disabled {
    /* Disable all status styles */
    pointer-events: none;
  }

  /* Classic state */

  .button-theme(
    @primary: @colors[@light][primary],
    @background: @colors[@light][background],
    @text: @colors[@light][text],
    @light-text: @colors[@light][background],
    @border: @colors[@light][border],
    @disabled-background: @colors[@light][background],
    @disabled-text: @colors[@light][text]
  );

  /* Dark theme state */
  & when (@color-scheme[dark] = true) {
    @media (prefers-color-scheme: dark) {
      .button-theme(
        @primary: @colors[@dark][primary],
        @background: @colors[@dark][background],
        @text: @colors[@dark][text],
        @light-text: @colors[@dark][background],
        @border: @colors[@dark][border],
        @disabled-background: @colors[@dark][background],
        @disabled-text: @colors[@dark][text]
      );
    }
  }

  /* Primary state */

  &-primary {
    .button-theme(
      @primary: darken(@colors[@light][primary], 20%),
      @background: @colors[@light][primary],
      @text: @colors[@light][background],
      @light-text: @colors[@light][background],
      @border: @colors[@light][primary],
      @disabled-background: @colors[@light][primary],
      @disabled-text: @colors[@light][background]
    );
  }

  /* Secondary state */

  &-secondary {
    .button-theme(
      @primary: darken(@colors[@light][secondary], 20%),
      @background: @colors[@light][secondary],
      @text: @colors[@light][text],
      @light-text: @colors[@light][text],
      @border: @colors[@light][secondary],
      @disabled-background: @colors[@light][secondary],
      @disabled-text: @colors[@light][background]
    );
  }

  /* Success states */

  &-success {
    .button-theme(
      @primary: darken(@colors[@light][success], 20%),
      @background: @colors[@light][success],
      @text: @colors[@light][text],
      @light-text: @colors[@light][text],
      @border: @colors[@light][success],
      @disabled-background: @colors[@light][success],
      @disabled-text: @colors[@light][background]
    );
  }

  /* Danger states */

  &-danger {
    .button-theme(
      @primary: darken(@colors[@light][danger], 20%),
      @background: @colors[@light][danger],
      @text: @colors[@light][text],
      @light-text: @colors[@light][text],
      @border: @colors[@light][danger],
      @disabled-background: @colors[@light][danger],
      @disabled-text: @colors[@light][background]
    );
  }

  &-clean {
    color: @colors[@light][text];
    background-color: transparent;
    border-color: transparent;

    i {
      color: inherit !important;
    }
  }

  &-link {
    color: @colors[@light][text];
    background-color: transparent;
    border-color: transparent;

    &:hover,
    &:active,
    &.is-active,
    &[data-active='true'] {
      text-decoration: underline;
        color: @colors[@light][textOffset] !important;
      background-color: transparent !important;
      border-color: transparent !important;
    }
  }

  /* Dark theme state */
  & when (@color-scheme[dark] = true) {
    @media (prefers-color-scheme: dark) {
      &-clean {
        color: @colors[@dark][text];
        background-color: transparent;
        border-color: transparent;
      }
    }
  }

  &:focus,
  &.is-focus {
    outline: none;
  }

  &::-moz-focus-inner {
    border: 0px;
    outline: none;
  }

  /*----------- Icons -----------*/

  &-icon {
    /* For button with only an icon */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.3em;
    width: 2.3em;

    .icon {
      margin-right: 0em !important;
      font-size: 1.5em !important;
      vertical-align: inherit !important;
    }

    .icon.loading {
      display: none;
    }

    &.is-loading {
      .icon {
        display: none;
      }
      .icon.icon-loading {
        display: block;
        animation: rotate360 1.2s linear infinite;
      }
    }
  }

  .icon {
    /* For icons inside button */
    margin-right: 0.3em;
    vertical-align: middle;
    font-size: 1em;

    [direction="rtl"] & {
      /* Support rtl langages */
      margin-left: 0.3em;
      margin-right: unset;
    }
  }
}
