@import '../variables/default.scss';
@import '../mixins/index.scss';

@mixin button-size($height, $padding, $font-size, $border-radius) {
  height: $height;
  padding: $padding;
  font-size: $font-size;
  border-radius: $border-radius;
}
@mixin button-height($height, $border-width: 2px) {
  height: $height;
  line-height: $height - $border-width * 2;
}

.at-button {
  position: relative;
  display: flex;
  justify-content: center;
  margin: $at-button-margin;
  padding: 0 $spacing-h-xl;
  color: $at-button-text-color;
  font-size: $font-size-lg;
  @include button-height($at-button-height-lg);

  text-align: center;
  border-radius: $border-radius-md;
  border: 2px solid $at-button-border-color;
  box-sizing: border-box;
  @include line();

  &:active {
    opacity: $opacity-active;
  }

  /* elements */
  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
  }

  &__text {
    display: inline;
  }

  &__wxbutton {
    position: absolute;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    opacity: 0;
    z-index: 1;

    &::after {
      display: none;
    }
  }

  /* modifiers */
  &--active {
    opacity: $opacity-active;
  }

  &--disabled {
    opacity: $opacity-disabled;

    &:active {
      opacity: $opacity-disabled;
    }
  }

  &--primary {
    color: $color-text-base-inverse;
    border: 2px solid $at-button-border-color-primary;
    background: $at-button-bg;
  }

  &--dashed {
    background-color: $color-white;
    border-style: dashed;
  }

  &--font {
    border: none;
  }

  &--danger {
    color: $color-text-base-inverse;
    background-color: $color-error;
    border-color: $color-error;
  }

  &--plain {
    color: $color-text-base;
    border-color: #e5e5e5;
  }

  &--small {
    padding: 0 $spacing-h-md;
    font-size: $font-size-sm;
    @include button-height($at-button-height-sm);
  }

  &--middle {
    padding: 0 $spacing-h-lg;
    font-size: $font-size-lg;
    @include button-height($at-button-height-md);
  }

  &--smiddle {
    padding: 0 $spacing-h-lg;
    font-size: $font-size-slg;
    @include button-height($at-button-height-smd);
  }

  &--xsmiddle {
    padding: 0 $spacing-h-lg;
    font-size: $font-size-sml;
    @include button-height($at-button-height-xsmd);
  }

  &--image {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 0;

    &:active {
      opacity: inherit;
    }
  }

  &--full {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0 auto;
  }

  // 微信小程序issue: https://github.com/nervjs/taro-ui/issues/534
  &--inline {
    display: inline-flex;
    padding: 0 $spacing-h-lg;
    align-items: center;
    justify-content: center;
    text-align: center;

    .at-button__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
    }
  }

  &--circle-h5 {
    width: $at-button-height-lg;
    @include button-size($at-button-height-lg, 0, $font-size-lg + 12px, 50%);

    &.at-button--small {
      width: $at-button-height-sm;
      @include button-size($at-button-height-sm, 0, $font-size-sm, 50%);
    }

    &.at-button--middle {
      width: $at-button-height-md;
      @include button-size($at-button-height-md, 0, $font-size-lg, 50%);
    }

    &.at-button--smiddle {
      width: $at-button-height-smd;
      @include button-size($at-button-height-smd, 0, $font-size-slg, 50%);
    }

    &.at-button--xsmiddle {
      width: $at-button-height-xsmd;
      @include button-size($at-button-height-xsmd, 0, $font-size-sml, 50%);
    }
  }

  &--circle {
    width: $at-button-height-lg;
    @include button-size($at-button-height-lg, 0 0 8px 0, $font-size-lg + 12px, 50%);

    &.at-button--small {
      width: $at-button-height-sm;
      @include button-size($at-button-height-sm, 0 0 4px 0, $font-size-sm, 50%);
    }

    &.at-button--middle {
      width: $at-button-height-md;
      @include button-size($at-button-height-md, 0 0 4px 0, $font-size-lg, 50%);
    }

    &.at-button--smiddle {
      width: $at-button-height-smd;
      @include button-size($at-button-height-smd, 0 0 4px 0, $font-size-slg, 50%);
    }

    &.at-button--xsmiddle {
      width: $at-button-height-xsmd;
      @include button-size($at-button-height-xsmd, 0 0 4px 0, $font-size-sml, 50%);
    }
  }

  &--round {
    @include button-size(
      $at-button-height-lg,
      0 $at-button-height-lg/2,
      $font-size-lg + 2px,
      $at-button-height-lg
    );

    &.at-button--small {
      @include button-size(
        $at-button-height-sm,
        0 $at-button-height-sm/2,
        $font-size-sm,
        $at-button-height-sm
      );
    }

    &.at-button--middle {
      @include button-size(
        $at-button-height-md,
        0 $at-button-height-md/2,
        $font-size-lg,
        $at-button-height-md
      );
    }

    &.at-button--smiddle {
      @include button-size(
        $at-button-height-smd,
        0 $at-button-height-smd/2,
        $font-size-slg,
        $at-button-height-smd
      );
    }

    &.at-button--xsmiddle {
      @include button-size(
        $at-button-height-xsmd,
        0 $at-button-height-xsmd/2,
        $font-size-sml,
        $at-button-height-xsmd
      );
    }
  }
}