.animation-svg(@animation) {
  animation: @animation;
}
.button-loading-icon() {
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  svg {
    .animation-svg(@Button-animation-spin);
  }
}

.button-variant(
  @background,
  @border: @background,
  @color: var(--color-bg-1),
  @hover-background: darken(@background, 7.5%),
  @hover-border,
  @hover-color: @color,
  @active-background: darken(@background, 10%),
  @active-border: darken(@border, 12.5%),
  @active-color: @color,
  @outline:@color
) {
  color: @color;
  background: @background;
  border-color: @border;
  // box-shadow: @Button-boxShadow;
  text-shadow: @Button-textShadow;
  &.is-ghost {
    color: @background;
    background: @color;
    &:hover {
      color: @hover-border;
      border-color: @hover-border;
    }

    &:active,
    &.is-active {
      color: @background;
      border-color: @hover-border;
      box-shadow: inset 0 3px 5px @outline;

      &:focus {
        box-shadow: inset 0 3px 5px @outline;
      }
    }
  }
  &:not(:disabled):not(.is-disabled):not(.is-ghost) {
    .hover({
      color: @hover-color;
      background: @hover-background;
      border-color: @hover-border;
    });
    .hover-active({
      color: @active-color;
      background: @active-background;
      border-color: @active-border;
    });

    &:active,
    &.is-active {
      color: @hover-color;
      border-color: @hover-border;
      box-shadow: 0 3px 5px @outline;

      &:focus {
        box-shadow: 0 3px 5px @outline;
      }
    }
  }
}