@import "../lib.less";

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

  .make-metrics(@size) {
    @height: ~"dls-button-height-@{size}";
    @padding: ~"dls-button-padding-@{size}";
    @radius: ~"dls-button-border-radius-@{size}";
    @font-size: ~"dls-button-font-size-@{size}";
    height: @@height;
    .padding(0, @@padding);
    border-radius: @@radius;
    font-size: @@font-size;

    &[ui~="square"] {
      width: @@height;
      padding: 0;
    }
  }

  &[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);
  }

  &-loading-icon,
  .@{veui-prefix}-icon,
  .dls-icon {
    margin-right: @dls-button-content-spacing;

    &:last-child {
      margin-right: 0;
    }
  }

  &:focus {
    outline: none;
  }

  &:hover {
    border-color: @dls-button-border-color-normal-hover;
    background-color: @dls-button-background-color-normal-hover;
  }

  &:active {
    border-color: @dls-button-border-color-normal-active;
    background-color: @dls-button-background-color-normal-active;
  }

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

  &&-loading {
    pointer-events: none;
    cursor: default;
    border-color: @dls-button-border-color-normal-active;
    background-color: @dls-button-background-color-normal-active;
  }

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

    &-content {
      .dls-icon-size(@dls-icon-size-normal);
    }
  }

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

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

    &:hover {
      border-color: @dls-button-border-color-basic-hover;
      background-color: @dls-button-background-color-basic-hover;
    }

    &[data-focus-visible-added] {
      border-color: @dls-border-color-focus;
      background-color: @dls-button-background-color-basic-focus;
    }

    &:active {
      border-color: @dls-button-border-color-basic-active;
      background-color: @dls-button-background-color-basic-active;
    }

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

    &.@{veui-prefix}-button-loading {
      border-color: @dls-button-border-color-basic-active;
      background-color: @dls-button-background-color-basic-active;
    }
  }

  &[ui~="strong"]:not([ui~="text"]):not([ui~="icon"]) {
    border-color: @dls-button-border-color-strong;
    background-color: @dls-button-background-color-strong;
    color: @dls-button-font-color-strong;

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

    &[data-focus-visible-added] {
      background-color: @dls-button-background-color-strong-focus;
    }

    &:active {
      border-color: @dls-button-border-color-strong-active;
      background-color: @dls-button-background-color-strong-active;
    }

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

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

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

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

    &[data-focus-visible-added] {
      background-color: @dls-button-background-color-primary-focus;
    }

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

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

    &.@{veui-prefix}-button-loading {
      border-color: @dls-button-border-color-primary-active;
      background-color: @dls-button-background-color-primary-active;
    }
  }

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

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

    &[data-focus-visible-added] {
      background-color: @dls-button-background-color-translucent-focus;
    }

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

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

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

  &[ui~="text"],
  &[ui~="icon"] {
    border: none;
    padding: 0;
    height: auto;
    line-height: inherit;
    background-color: @dls-button-background-color-text;
    color: @dls-button-font-color-text;

    &::after {
      content: "";
      .absolute(_, -@dls-button-padding-text);
      height: calc(1em + @dls-button-padding-text * 2);
      border: 1px solid transparent;
      border-radius: inherit;
      .veui-button-transition();
      pointer-events: none;
    }

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

    &[data-focus-visible-added] {
      border: none;
      box-shadow: none;
      background-color: @dls-button-background-color-text-focus;
      color: @dls-button-font-color-text-focus;

      &::after {
        .dls-focus-ring(
          @dls-button-border-color-focus,
          @dls-button-shadow-focus
        );
      }
    }

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

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

    &[ui~="strong"] {
      color: @dls-button-font-color-text-strong;

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

      &[data-focsu-visible-added] {
        color: @dls-button-font-color-text-strong-focus;
      }

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

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

    &[ui~="aux"] {
      color: @dls-button-font-color-text-aux;

      &:hover {
        color: @dls-button-font-color-text-aux-hover;
      }

      &[data-focsu-visible-added] {
        color: @dls-button-font-color-text-aux-focus;
      }

      &:active {
        color: @dls-button-font-color-text-aux-active;
      }

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

  &[ui~="icon"] {
    &::after {
      .absolute(auto);
      .size(calc(@dls-icon-size-normal + @dls-button-padding-text * 2));
    }
  }

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