index.less

@import '../../style/mixins/reset.less';
@import './mixin.less';

.@{button-prefix} {
  .reset-component-new();
  .reset-color(@button-color, @button-background-color);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  outline: none;
  text-decoration: none;
  border: 1px solid @button-border-color;
  border-radius: @button-border-radius;
  transition: all var(--ix-transition-duration-fast) var(--ix-ease-in-out);

  &::before {
    display: none;
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: 1;
    background: @button-background-color;
    border-radius: inherit;
    opacity: 0.35;
    transition: opacity @transition-duration-base;
    content: '';
    pointer-events: none;
  }

  &:empty {
    display: inline-block;
    width: 0;
    visibility: hidden;
    content: '\a0';
  }

  > .@{icon-prefix} {
    color: @button-icon-color;
    font-size: @button-icon-font-size;
  }

  &:hover,
  &:active,
  &-primary,
  &-link,
  &-danger,
  &-ghost,
  &-disabled {
    > .@{icon-prefix} {
      color: inherit;
    }
  }

  > span {
    display: inline-block;
  }

  > .@{icon-prefix} + span {
    margin-left: @spacing-xs;
  }

  &-xs {
    .button-size(@button-height-xs, @button-font-size-xs, @button-min-width-xs, @button-padding-horizontal-xs);
  }

  &-sm {
    .button-size(@button-height-sm, @button-font-size-sm, @button-min-width-sm, @button-padding-horizontal-sm);
  }

  &-md {
    .button-size(@button-height-md, @button-font-size-md, @button-min-width-md, @button-padding-horizontal-md);
  }

  &-lg {
    .button-size(@button-height-lg, @button-font-size-lg, @button-min-width-lg, @button-padding-horizontal-lg);

    &.@{button-prefix}-icon-only {
      > .@{icon-prefix} {
        font-size: calc(@button-icon-font-size + 2px);
      }
    }
  }

  &-xl {
    .button-size(@button-height-xl, @button-font-size-xl, @button-min-width-xl, @button-padding-horizontal-xl);

    &.@{button-prefix}-icon-only {
      > .@{icon-prefix} {
        font-size: calc(@button-icon-font-size + 4px);
      }
    }
  }

  &-primary {
    color: @button-primary-color;
    background-color: @button-primary-background-color;
    border-color: @button-primary-background-color;

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

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

  &-default,
  &-dashed {
    &:hover {
      color: @button-primary-background-color-hover;
      border-color: @button-primary-background-color-hover;
    }

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

  &-dashed {
    border-style: dashed;
  }

  &-text,
  &-link {
    background-color: transparent;
    border: none;
    padding: 0;
    min-width: auto;
    height: auto;
    user-select: text;

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

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

  &-link {
    color: @button-primary-background-color;
  }

  &-danger {
    color: @button-danger-color;
    border-color: @button-danger-color;

    &:hover {
      color: @button-danger-color-hover;
      border-color: @button-danger-color-hover;
    }

    &:active {
      color: @button-danger-color-active;
      border-color: @button-danger-color-active;
    }
  }

  &-danger&-primary {
    color: @button-primary-color;
    background-color: @button-danger-color;

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

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

  &-ghost {
    color: @button-primary-color;
    border-color: @button-ghost-border-color;

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

    &:active {
      color: @button-color;
      border-color: @button-ghost-border-color;
    }
  }

  &-ghost,
  &-ghost&-primary,
  &-ghost&-danger {
    background-color: transparent;

    &:hover {
      background-color: @button-ghost-background-color-hover;
    }

    &:active {
      background-color: @button-ghost-background-color-active;
    }
  }

  &-ghost&-primary {
    color: @button-primary-background-color;
    border-color: @button-primary-background-color;

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

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

  &-ghost&-danger {
    color: @button-danger-color;
    border-color: @button-danger-color;

    &:hover {
      color: @button-danger-color-hover;
      border-color: @button-danger-color-hover;
    }

    &:active {
      color: @button-danger-color-active;
      border-color: @button-danger-color-active;
    }
  }

  &-disabled {
    cursor: not-allowed;
    pointer-events: none;

    &,
    &:hover,
    &:active {
      color: @button-color-disabled;
      background-color: @button-background-color-disabled;
      border-color: @button-border-color;
    }
  }

  &-disabled&-link,
  &-disabled&-text {
    &,
    &:hover,
    &:active {
      background-color: transparent;
    }
  }

  &-disabled&-ghost {
    &,
    &:hover,
    &:active {
      background-color: @button-ghost-background-color-disabled;
    }
  }

  &-loading {
    cursor: default;
    pointer-events: none;

    &::before {
      display: block;
    }
  }

  &-square,
  &-circle {
    padding: 0;
  }

  &-circle {
    border-radius: 50%;
  }

  &-block {
    width: 100%;
  }

  &-icon-only {
    min-width: auto;
  }
}

.@{button-prefix}-group {
  line-height: 0;

  .@{button-prefix} {
    z-index: auto;

    &:hover,
    &:active {
      z-index: 2;
    }

    &.@{button-prefix}-disabled {
      z-index: 0;
    }
  }

  &-compact {
    .@{button-prefix} {
      transition: color var(--ix-transition-duration-fast) var(--ix-ease-in-out),
        background-color var(--ix-transition-duration-fast) var(--ix-ease-in-out);
    }

    &:not(.@{space-prefix}-vertical) {
      > .@{space-prefix}-item:first-child > .@{button-prefix} {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      > .@{space-prefix}-item:last-child > .@{button-prefix} {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      > .@{space-prefix}-item:not(:first-child):not(:last-child) > .@{button-prefix} {
        border-radius: 0;
      }

      > .@{space-prefix}-item:not(:last-child) > .@{button-prefix} {
        margin-right: -1px;
      }
    }

    &.@{space-prefix}-vertical {
      > .@{space-prefix}-item:first-child > .@{button-prefix} {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      > .@{space-prefix}-item:last-child > .@{button-prefix} {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      > .@{space-prefix}-item:not(:first-child):not(:last-child) > .@{button-prefix} {
        border-radius: 0;
      }

      > .@{space-prefix}-item:not(:last-child) > .@{button-prefix} {
        margin-bottom: -1px;
      }
    }
  }
}