@import "./abstracts/variable";
@import "./abstracts/mixin";
@import "./loading.scss";
@import "./icon.scss";

@mixin button-type-style($color, $normal, $active, $disabled, $disabledcolor, $loadingColor) {
  background: $normal;
  color: $color;
  font-weight: 500;

  &::after {
    border-color: $normal;
  }
  &:active {
    background: $active;

    &::after {
      border-color: $active;
    }
  }
  @include when(disabled) {
    &:active {
      background: $disabled;
      color: $disabledcolor;
    }
    background: $disabled;
    color: $disabledcolor;

    &::after {
      border-color: $disabled;
    }
  }
  @include when(loading) {
    &,
    &:active {
      color: $color;
      background: $normal;
    }
    &::after {
      border-color: $normal;
    }
    .wd-button__loading {
      color: $loadingColor;
    }
  }
  @include when(suck) {
    border-radius: 0;
  }
}

@mixin button-plain-style($color, $normal, $active, $disabled) {
  color: $color;
  background: transparent;

  &::after {
    border-color: $normal;
  }
  &:active {
    color: $active;
    background: transparent;

    &::after {
      border-color: $active;
    }
  }
  @include when(disabled) {
    color: $disabled;
    background: transparent;

    &::after {
      border-color: $disabled;
    }
    &:active {
      background: transparent;
    }
  }
  @include when(loading) {
    &,
    &:active {
      color: $color;
      background: transparent;

      &::after {
        border-color: $normal;
      }
    }
  }
}

@include b(button) {
  position: relative;
  outline: none;
  text-align: center;
  -webkit-appearance: none;
  outline: none;
  background: transparent;
  border: none;
  color: $-button-normal-color;
  box-sizing: border-box;
  transition: all 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  &:active {
    color: $-button-normal-active-color;
    background: $-button-normal-active-bg;

    &::after {
      border-color: $-button-normal-border-active-color;
    }
  }
  @include when(disabled) {
    color: $-button-normal-disabled-color;
    background: $-button-normal-disabled-bg;

    &::after {
      border-color: $-button-normal-border-disabled-color;
    }
    &:active {
      color: $-button-normal-disabled-color;
      background: $-button-normal-disabled-bg;
      
      &::after {
        border-color: $-button-normal-border-disabled-color;
      }
    }
  }

  @include e(loading) {
    display: inline-block;
    margin-right: 2px;
    vertical-align: middle;
    animation: wd-rotate 0.8s linear infinite;
    animation-duration: 2s;
  }
  @include when(loading) {
    &:active {
      color: $-button-normal-color;
      background: transparent;

      &::after {
        border-color: $-button-border-color;
      }
    }
  }

  @include when(primary) {
    @include button-type-style(
      $-color-white,
      $-button-primary-bg-color,
      $-button-primary-active-color,
      $-button-primary-disabled-color,
      $-color-white,
      $-button-primary-color
    );
  }
  @include when(success) {
    @include button-type-style(
      $-color-white,
      $-button-success-color,
      $-button-success-active-color,
      $-button-success-disabled-color,
      $-color-white,
      $-button-success-color
    );
  }
  @include when(info) {
    @include button-type-style(
      $-button-info-color,
      $-button-info-bg-color,
      $-button-info-active-bg-color,
      $-button-info-disabled-bg-color,
      $-button-info-disabled-color,
      $-button-info-color
    );
  }
  @include when(warning) {
    @include button-type-style(
      $-color-white,
      $-button-warning-color,
      $-button-warning-active-color,
      $-button-warning-disabled-color,
      $-color-white,
      $-button-warning-color
    );
  }
  @include when(error) {
    @include button-type-style(
      $-color-white,
      $-button-error-color,
      $-button-error-active-color,
      $-button-error-disabled-color,
      $-color-white,
      $-button-error-color
    );
  }

  @include when(small) {
    height: $-button-small-height;
    padding: 0 11px;
    border-radius: $-button-small-radius;
    font-size: $-button-small-fs;
    font-weight: normal;
    @include when(round) {
      border-radius: $-button-small-height / 2;

      &::after {
        border-radius: $-button-small-height;
      }
    }
    .wd-button__loading {
      width: $-button-small-loading;
      height: $-button-small-loading;
    }
  }

  @include when(medium) {
    height: $-button-medium-height;
    padding: $-button-small-padding;
    padding: $-button-medium-padding;
    border-radius: $-button-medium-radius;
    font-size: $-button-medium-fs;

    &::after {
      border-radius: $-button-medium-radius * 2;
    }
    &:not(.is-plain) {
      @include when(primary) {
        box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color;
      }

      @include when(success) {
        box-shadow: $-button-medium-box-shadow-size $-button-success-box-shadow-color;
      }

      @include when(warning) {
        box-shadow: $-button-medium-box-shadow-size $-button-warning-box-shadow-color;
      }

      @include when(error) {
        box-shadow: $-button-medium-box-shadow-size $-button-error-box-shadow-color;
      }
    }

    @include when(round) {
      &:not(.is-icon) {
        min-width: 118px;
        border-radius: $-button-medium-height / 2;

        &::after {
          border-radius: $-button-medium-height;
        }
      }
      @include when(text) {
        min-width: 0;
        border-radius: 0;
      }
    }

    .wd-button__loading {
      width: $-button-medium-loading;
      height: $-button-medium-loading;
    }
  }
  @include when(large) {
    height: $-button-large-height;
    padding: $-button-large-padding;
    border-radius: $-button-large-radius;
    font-size: $-button-large-fs;

    &::after {
      border-radius: $-button-large-radius * 2;
    }
    &:not(.is-plain) {
      @include when(primary) {
        box-shadow: $-button-large-box-shadow-size $-button-primary-box-shadow-color;
      }

      @include when(success) {
        box-shadow: $-button-large-box-shadow-size $-button-success-box-shadow-color;
      }

      @include when(warning) {
        box-shadow: $-button-large-box-shadow-size $-button-warning-box-shadow-color;
      }

      @include when(error) {
        box-shadow: $-button-large-box-shadow-size $-button-error-box-shadow-color;
      }
    }

    @include when(round) {
      &:not(.is-icon) {
        border-radius: $-button-large-height / 2;

        &::after {
          border-radius: $-button-large-height;
        }
      }
      @include when(text) {
        border-radius: 0;
      }
    }
    .wd-button__loading {
      width: $-button-large-loading;
      height: $-button-large-loading;
    }
  }

  @include when(text) {
    color: $-button-primary-color;
    padding: 4px 0;

    &::after {
      display: none;
    }
    &:active {
      color: $-button-primary-active-color;
      background: transparent;
    }
    @include when(disabled) {
      color: $-button-normal-disabled-color;
      background: transparent;
    }
  }

  @include when(plain) {
    background: $-color-white;

    &::after {
      position: absolute;
      display: block;
      content: '';
      width: 200%;
      height: 200%;
      left: 0;
      top: 0;
      border: 1px solid $-button-border-color;
      box-sizing: border-box;
      transform: scale(0.5);
      transform-origin: left top;
    }
    @include when(primary) {
      @include button-plain-style(
        $-button-primary-color,
        $-button-primary-color,
        $-button-primary-active-color,
        $-button-primary-disabled-color
      );
      &:active {
        background-color: $-button-primary-plain-active-bg-color;
      }
      @include when(disabled) {
        &:active {
          background-color: $-button-primary-plain-active-bg-color;
        }
        opacity: 1;
        background-color: $-button-primary-plain-active-bg-color;
        color: $-button-primary-plain-disabled-color;
      }
    }
    @include when(success) {
      @include button-plain-style(
        $-button-success-color,
        $-button-success-color,
        $-button-success-active-color,
        $-button-success-disabled-color
      );
    }
    @include when(info) {
      @include button-plain-style(
        $-button-info-plain-normal-color,
        $-button-info-bg-color,
        $-button-info-active-color,
        $-button-info-disabled-color
      );
      &::after {
        border-color: $-button-info-plain-color;
      }
      &:active {
        background-color: $-button-info-plain-active-bg-color;

        &::after {
          border-color: $-button-info-plain-active-color;
        }
      }
      @include when(disabled) {
        &,
        &:active {
          background-color: $-button-info-plain-disabled-bg-color;

          &::after {
            border-color: $-button-info-plain-disabled-bg-color;
          }
        }
      }
      @include when(loading) {
        &::after,
        &:active::after {
          border-color: $-button-info-plain-color;
        }
      }
    }
    @include when(warning) {
      @include button-plain-style(
        $-button-warning-color,
        $-button-warning-color,
        $-button-warning-active-color,
        $-button-warning-disabled-color
      );
    }
    @include when(error) {
      @include button-plain-style(
        $-button-error-color,
        $-button-error-color,
        $-button-error-active-color,
        $-button-error-disabled-color
      );
    }
    @include when(suck) {
      &:active {
        background: $-button-suck-active-color;
      }
      @include when(disabled) {
        background: $-color-white;
      }
    }
  }

  @include when(suck) {
    font-size: $-button-large-fs;
    height: $-button-suck-height;
    width: 100%;
    border-radius: 0;

    &::after {
      display: none;
    }
  }

  @include when(block) {
    width: 100%;
  }

  @include when(icon) {
    width: $-button-icon-size;
    height: $-button-icon-size;
    padding: 0;
    line-height: $-button-icon-size;
    text-align: center;
    border-radius: 50%;
    font-size: 0;
    color: $-button-icon-color;

    &::after {
      display: none;
    }
    &:active {
      background: $-button-icon-active-color;
    }
    @include when(disabled) {
      color: $-button-icon-disabled-color;
      background: transparent;

      &:active {
        background: transparent;
      }
    }
  }

  @include e(icon) {
    display: inline-block;
    margin-right: 2px;
    font-size: $-button-icon-fs;
    vertical-align: middle;
  }

  @include e(txt) {
    display: inline-block;
    user-select: none;
    vertical-align: middle;
  }
}
@keyframes wd-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}