@import "./mixin.scss";

$btn-prefix-cls: #{$lib-name}-btn;
$btn-padding-base: 8px 16px;
$btn-padding-large: 11px 20px;
$btn-padding-small: 6px 12px;
$btn-padding-xsmall: 5px 10px;
$btn-circle-size: 64px;
$line-height-base: 1.5;

.#{$btn-prefix-cls} {
  @include btn-common();

  &-long {
    width: 100%;
  }

  & > .#{$lib-name}-icon + span,
  & > span + .#{$lib-name}-icon {
    margin-left: 10px;
    display: inline-block;
  }

  // type
  &-primary {
    @include dark-bg-btn();
  }

  &-ghost {
    @include white-bg-btn($title-color-light);
  }

  &-dashed {
    @include white-bg-btn($title-color-light);
    border-style: dashed;
  }

  &-text {
    @include white-bg-btn($title-color-light);
    border: transparent;

    &:active,
    &.active {
      border: transparent;
    }
  }

  &-success {
    @include dark-bg-btn($success-color);
  }

  &-warning {
    @include dark-bg-btn($warning-color);
  }

  &-error {
    @include dark-bg-btn($error-color);
  }

  &-info {
    @include dark-bg-btn($info-color);
  }

  // shape
  &-circle {
    border-radius: $btn-circle-size;
    &.#{$btn-prefix-cls}-icon-only {
      @include square(32px);
      @include button-size(0, 14px);
      border-radius: 50%;

      &.#{$btn-prefix-cls}-large {
        @include square(40px);
        @include button-size(0, 16px);
      }

      &.#{$btn-prefix-cls}-small {
        @include square(28px);
        @include button-size(0, 12px);
      }

      &.#{$btn-prefix-cls}-xsmall {
        @include square(26px);
        @include button-size(0, 12px);
      }
    }
  }

  // loading mask
  &:before {
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    background: $background-color-base;
    opacity: 0.35;
    content: "";
    border-radius: inherit;
    z-index: 1;
    transition: opacity $transition-time;
    pointer-events: none;
    display: none;
  }

  &-loading {
    position: relative;
    pointer-events: none;
    &:before {
      display: block;
    }
  }

  // group
  &-group {
    @include btn-group($btn-prefix-cls);
  }

  &-group-vertical {
    @include btn-group-vertical($btn-prefix-cls);
  }
}