@import "../lib.less";
@import "../variables/components/button.less";

.@{veui-prefix}-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  border: 1px solid @veui-button-border-color-normal;
  background-color: @veui-button-background-color-normal;
  color: @veui-button-font-color-normal;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  .veui-button-transition();

  .veui-stub();

  &-native {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    white-space: nowrap;
    background: none;
    color: inherit;
    font: inherit;
    cursor: inherit;
    padding: 0;
    pointer-events: none;
  }

  .make-metrics(@size) {
    @height: ~"veui-button-height-@{size}";
    @padding: ~"veui-button-padding-@{size}";
    @font-size: ~"veui-button-font-size-@{size}";
    @min-width: ~"veui-button-min-width-@{size}";
    @border-radius: ~"veui-button-border-radius-@{size}";
    height: @@height;
    .padding(0, @@padding);
    border-radius:  @@border-radius;
    font-size: @@font-size;
    &[ui~="normal"],
    &[ui~="primary"],
    &[ui~="translucent"] {
        min-width: @@min-width;
    }
    &[ui~="text"],
    &[ui~="icon"],
    &[ui~="square"]{
        min-width: auto;
    }
  }

  &[ui~="xs"] {
    .make-metrics(xs);
  }

  &[ui~="s"] {
    .make-metrics(s);
  }

  &[ui~="m"] {
    .make-metrics(m);
  }

  &[ui~="l"] {
    .make-metrics(l);
  }

  &[ui~="xl"] {
    .make-metrics(xl);
  }

  .@{veui-prefix}-icon {
    .veui-icon-size(1em);
    margin-right: @veui-button-content-spacing;
    &:last-child {
      margin-right: 0;
    }
  }

  &-loading-icon {
    margin-right: @veui-button-content-spacing;
  }

  .@{veui-prefix}-loading {
    &-spinner {
      color: inherit;
    }

    &-content {
      .veui-icon-size(1em);
    }
  }

  &:focus {
    outline: none;
  }

  &:hover {
    background-color: @veui-button-background-color-normal-hover;
    border: 1px solid @veui-button-border-color-normal-hover;
    color: @veui-button-font-color-normal-hover;
  }

  &[data-focus-visible-added] {
    background-color: @veui-button-background-color-normal-focus;
    .veui-focus-ring(@veui-button-border-color-focus, @veui-button-shadow-focus);
    color: @veui-button-font-color-normal-focus;
  }

  &:active {
    border: 1px solid @veui-button-border-color-normal-active;
    background-color: @veui-button-background-color-normal-active;
    color: @veui-button-font-color-normal-active;
  }

  &.@{veui-prefix}-disabled {
    border-color: @veui-button-border-color-normal-disabled;
    background-color: @veui-button-background-color-normal-disabled;
    color: @veui-button-font-color-normal-disabled;
  }

  &&-loading {
    pointer-events: none;
    cursor: default;
    border: 1px solid @veui-button-loading-border-color-normal;
    background-color: @veui-button-loading-background-color-normal;
    color: @veui-button-loading-font-color-normal;
  }

  &-loading .@{veui-prefix}-icon:not(&-loading-icon) {
    display: none;
  }

  &[ui~="strong"] {
    border-color: @veui-button-border-color-strong;
    background-color: @veui-button-background-color-strong;
    color: @veui-button-font-color-strong;

    &:hover {
      color: @veui-button-font-color-strong-hover;
      border-color: @veui-button-background-color-strong-hover;;
      background-color: @veui-button-background-color-strong-hover;
    }

    &[data-focus-visible-added] {
      color: @veui-button-font-color-strong-focus;
      background-color: @veui-button-background-color-strong-focus;
      .veui-focus-ring(@veui-button-border-color-focus, @veui-button-shadow-focus);
    }

    &:active {
      color: @veui-button-font-color-strong-active;
      background-color: @veui-button-background-color-strong-active;
      border-color: @veui-color-brand-5;
    }

    &.@{veui-prefix}-disabled {
      border-color: @veui-button-border-color-strong-disabled;
      background-color: @veui-button-background-color-strong-disabled;
      color: @veui-button-font-color-strong-disabled;
    }

    &.@{veui-prefix}-button-loading {
      background-color: @veui-button-loading-background-color-strong;
      border-color: @veui-button-loading-border-color-strong;
      color: @veui-button-loading-font-color-strong;
    }
  }

  &[ui~="primary"] {
    border-color: @veui-button-border-color-primary;
    background-color: @veui-button-background-color-primary;
    color: @veui-button-font-color-primary;

    &:hover {
      background-color: @veui-button-background-color-primary-hover;
    }

    &[data-focus-visible-added] {
      background-color: @veui-button-background-color-primary-focus;
      .veui-focus-ring(@veui-button-border-color-focus, @veui-button-shadow-focus);
    }

    &:active {
      background-color: @veui-button-background-color-primary-active;
      border-color: @veui-button-border-color-primary;
    }

    &.@{veui-prefix}-disabled {
      border-color: @veui-button-border-color-primary-disabled;
      background-color: @veui-button-background-color-primary-disabled;
      color: @veui-button-font-color-primary-disabled;
    }

    &.@{veui-prefix}-button-loading {
      background-color: @veui-button-loading-background-color-strong;
      border-color: @veui-button-loading-border-color-strong;
      color: @veui-button-loading-font-color-strong;
    }
  }

  &[ui~="translucent"] {
    border-color: @veui-button-border-color-translucent;
    background-color: @veui-button-background-color-translucent;
    color: @veui-button-font-color-translucent;

    &:hover {
      background-color: @veui-button-background-color-translucent-hover;
    }

    &[data-focus-visible-added] {
      background-color: @veui-button-background-color-translucent-focus;
      .veui-focus-ring(@veui-button-border-color-focus, @veui-button-shadow-focus);
    }

    &:active {
      background-color: @veui-button-background-color-translucent-active;
      border-color: @veui-button-border-color-translucent;
    }

    &.@{veui-prefix}-disabled {
      border-color: @veui-button-border-color-translucent-disabled;
      background-color: @veui-button-background-color-translucent-disabled;
      color: @veui-button-font-color-translucent-disabled;
    }

    &.@{veui-prefix}-button-loading {
      background-color: @veui-button-background-color-translucent-active;
    }
  }

  &[ui~="text"],
  &[ui~="icon"] {
    border: none;
    padding: 0;
    height: auto;
    line-height: 1;
    // 模拟focus边框
    &::after {
      content: "";
      border: 1px solid transparent;
      border-radius: inherit;
      .veui-button-transition();
      pointer-events: none;
    }

    &[data-focus-visible-added] {
      box-shadow: none;

      &::after {
        .veui-focus-ring(
          @veui-button-border-color-focus,
          @veui-button-shadow-focus
        );
      }
    }
  }
  &[ui~="text"] {
    background-color: @veui-button-background-color-text;
    &::after {
      .absolute(-@veui-button-padding-text);
    }

    &:hover {
      background-color: @veui-button-background-color-text-hover;
      color: @veui-button-font-color-text-hover;
    }

    &[data-focus-visible-added] {
      background-color: @veui-button-background-color-text-focus;
      color: @veui-button-font-color-text-focus;
      border: 1px solid @veui-button-background-color-text;
      &::after {
        .veui-focus-ring(@veui-button-border-color-focus, @veui-button-shadow-focus);
      }
    }

    &:active {
      background-color: @veui-button-background-color-text-active;
      color: @veui-button-font-color-text-active;
    }

    &.@{veui-prefix}-disabled {
      background-color: @veui-button-background-color-text-disabled;
      color: @veui-button-font-color-text-disabled;
    }

    &.@{veui-prefix}-button-loading {
      color: @veui-button-loading-font-color-text;
    }
  }
  &[ui~="text"][ui~="strong"] {
    background-color: @veui-button-background-color-text;
    color: @veui-button-font-color-text-strong;

    &::after {
      .absolute(-@veui-button-padding-text);
    }

    &:hover {
      background-color: @veui-button-background-color-text-hover;
      color: @veui-button-font-color-text-strong-hover;
    }

    &[data-focus-visible-added] {
      background-color: @veui-button-background-color-text-focus;
      color: @veui-button-font-color-text-strong-focus;
      border: 1px solid @veui-button-background-color-text;
      &::after {
        .veui-focus-ring(@veui-button-border-color-focus, @veui-button-shadow-focus);
      }
    }

    &:active {
      background-color: @veui-button-background-color-text-active;
      color: @veui-button-font-color-text-strong-active;
    }

    &.@{veui-prefix}-disabled {
      background-color: @veui-button-background-color-text-disabled;
      color: @veui-button-font-color-text-strong-disabled;
    }

    &.@{veui-prefix}-button-loading {
      color: @veui-button-loading-font-color-text;
    }
  }
  &[ui~="icon"] {
    background-color: @veui-button-background-color-icon;
    color: @veui-button-font-color-icon;

    &::after {
      .absolute(-@veui-button-padding-icon);
    }

    &:hover {
      background-color: @veui-button-background-color-icon-hover;
      color: @veui-button-font-color-icon-hover;
    }

    &[data-focus-visible-added] {
      background-color: @veui-button-background-color-icon-focus;
      color: @veui-button-font-color-icon-focus;
    }

    &:active {
      background-color: @veui-button-background-color-icon-active;
      color: @veui-button-font-color-icon-active;
    }

    &.@{veui-prefix}-disabled {
      background-color: @veui-button-background-color-icon-disabled;
      color: @veui-button-font-color-icon-disabled;
    }

    &.@{veui-prefix}-button-loading {
      .@{veui-prefix}-icon:not(.@{veui-prefix}-button-loading-icon) {
        display: none;
      }
    }
  }

  &[data-focus-visible-added] {
      .veui-focus-ring(@veui-button-border-color-focus, @veui-button-shadow-focus);
  }

  // square
  .make-width(@size) {
    @width: ~"veui-button-square-width-@{size}";
    padding: 0;
    width: @@width;
  }
  &[ui~="square"] {
    &&[ui~="xs"] {
        .make-width(xs);
    }

    &&[ui~="s"] {
        .make-width(s);
    }

    &&[ui~="m"] {
        .make-width(m);
    }

    &&[ui~="l"] {
        .make-width(l);
    }

    &&[ui~="xl"] {
        .make-width(xl);
    }
  }
}