@import '../../style/core/index';
@import 'node_modules/zarm/lib/activity-indicator/style/component.scss';
@import 'mixins';

@include b(button) {
  display: inline-block;
  @include button-base();
  @include button-size(
    var(--button-height-md),
    var(--button-padding-h-md),
    var(--button-font-size-md),
    var(--button-icon-size-md)
  );

  /* Button sizes */
  @include m(xl) {
    @include button-size(
      var(--button-height-xl),
      var(--button-padding-h-xl),
      var(--button-font-size-xl),
      var(--button-icon-size-xl)
    );
  }

  @include m(lg) {
    @include button-size(
      var(--button-height-lg),
      var(--button-padding-h-lg),
      var(--button-font-size-lg),
      var(--button-icon-size-lg)
    );
  }

  @include m(sm) {
    @include button-size(
      var(--button-height-sm),
      var(--button-padding-h-sm),
      var(--button-font-size-sm),
      var(--button-icon-size-sm)
    );
  }

  @include m(xs) {
    @include button-size(
      var(--button-height-xs),
      var(--button-padding-h-xs),
      var(--button-font-size-xs),
      var(--button-icon-size-xs)
    );
  }

  /* Button themes */
  @include m(default) {
    @include button-theme(
      var(--button-default-background),
      var(--button-default-border),
      var(--button-default-color),
      var(--button-default-hover-background),
      var(--button-default-hover-border),
      var(--button-default-hover-color),
      var(--button-default-active-background),
      var(--button-default-active-border),
      var(--button-default-active-color),
      var(--button-default-background),
      var(--button-default-border),
      var(--color-text-disabled),
      var(--button-disabled-opacity)
    );

    @include m(link) {
      @include button-link(
        var(--button-default-color),
        var(--color-link)
      );
    }

    @include m(loading) {
      color: var(--theme-primary);
      border-color: var(--theme-primary);
    }

    @include button-ghost(
      var(--button-default-ghost-border),
      var(--button-default-ghost-color),
      var(--button-default-ghost-hover-border),
      var(--button-default-ghost-hover-color),
      var(--button-default-ghost-active-border),
      var(--button-default-ghost-active-color)
    );
  }

  @include m(primary) {
    @include button-theme(
      var(--button-primary-background),
      var(--button-primary-border),
      var(--button-primary-color),
      var(--button-primary-hover-background),
      var(--button-primary-hover-border),
      var(--button-primary-hover-color),
      var(--button-primary-active-background),
      var(--button-primary-active-border),
      var(--button-primary-active-color),
      var(--button-primary-background),
      var(--button-primary-border),
      var(--button-primary-color),
      var(--button-disabled-opacity)
    );

    @include m(link) {
      @include button-link(
        var(--color-link),
        var(--button-primary-hover-background)
      );
    }

    @include button-ghost(
      var(--button-primary-ghost-border),
      var(--button-primary-ghost-color),
      var(--button-primary-ghost-hover-border),
      var(--button-primary-ghost-hover-color),
      var(--button-primary-ghost-active-border),
      var(--button-primary-ghost-active-color)
    );

    @include b(activity-indicator) {
      circle {
        stroke: #fff;
      }
    }
  }

  @include m(danger) {
    @include button-theme(
      var(--button-danger-background),
      var(--button-danger-border),
      var(--button-danger-color),
      var(--button-danger-hover-background),
      var(--button-danger-hover-border),
      var(--button-danger-hover-color),
      var(--button-danger-active-background),
      var(--button-danger-active-border),
      var(--button-danger-active-color),
      var(--button-danger-background),
      var(--button-danger-border),
      var(--button-danger-color),
      var(--button-disabled-opacity)
    );

    @include m(link) {
      @include button-link(
        var(--button-danger-ghost-color),
        var(--button-danger-hover-background)
      );
    }

    @include button-ghost(
      var(--button-danger-ghost-border),
      var(--button-danger-ghost-color),
      var(--button-danger-ghost-hover-border),
      var(--button-danger-ghost-hover-color),
      var(--button-danger-ghost-active-border),
      var(--button-danger-ghost-active-color)
    );

    @include b(activity-indicator) {
      circle {
        stroke: #fff;
      }
    }
  }

  @include m(rect) {
    @include button-shape(0);
  }

  @include m(radius) {
    @include button-shape(var(--radius-md));
  }

  @include m(round) {
    @include button-shape(var(--radius-round));
  }

  @include m(circle) {
    @include button-shape(var(--radius-circle));
  }
}

@include b(button-group) {
  display: inline-block;

  @include b(button) {
    position: relative;

    @include button-size(
      var(--button-height-md),
      var(--button-padding-h-md),
      var(--button-font-size-md),
      var(--button-font-size-md)
    );

    /* Button sizes */
    @include m(xl) {
      @include button-size(
        var(--button-height-xl),
        var(--button-padding-h-xl),
        var(--button-font-size-xl),
        var(--button-font-size-xl)
      );
    }

    @include m(lg) {
      @include button-size(
        var(--button-height-lg),
        var(--button-padding-h-lg),
        var(--button-font-size-lg),
        var(--button-font-size-lg)
      );
    }

    @include m(sm) {
      @include button-size(
        var(--button-height-sm),
        var(--button-padding-h-sm),
        var(--button-font-size-sm),
        var(--button-font-size-sm)
      );
    }

    @include m(xs) {
      @include button-size(
        var(--button-height-xs),
        var(--button-padding-h-xs),
        var(--button-font-size-xs),
        var(--button-font-size-xs)
      );
    }

    @include m(primary) {
      &:not(:last-child) {
        border-right: 1px solid var(--button-primary-gap-color);
        margin-right: 0 !important;
      }
    }

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:first-child:last-child {
      border-radius: var(--radius-md);
    }

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }

    &:not(:last-child) {
      margin-right: -1px;
    }

    &:hover,
    &:focus,
    &:active {
      z-index: 1;
    }
  }
}