// 提供含有 css variables 的 sass variables 供覆盖

@import './variables.scss';
@import "~@alifd/next/lib/core/index-noreset"; // next core style
@import '~@alifd/next/lib/button/scss/variable'; // next button variables
@import '~@alifd/next/lib/button/scss/mixin'; // next button mixin

#{$btn-prefix} {
  &[disabled] {
    background-image: none !important;

    &#{$btn-prefix} {
      &-primary {

        &:hover,
        &:active {
          box-shadow: none !important;
        }
      }

      &-secondary {
        &:hover,
        &:active {
          box-shadow: none !important;
        }
      }

      &-normal {
        &:hover,
        &:active {
          box-shadow: none !important;
        }
      }
    }
  }

  .disabled {
    &#{$btn-prefix} {
      &-primary {
        background-image: none !important;

        &:hover {
          box-shadow: none !important;
        }
      }

      &-secondary {
        &:active {
          box-shadow: none !important;
        }
      }

      &-normal {
        &:active {
          box-shadow: none !important;
        }
      }
    }
  }

  &#{$btn-prefix} {
    &-primary {
      background-image: $b-design-btn-primary-background-image;
      
      &#{$btn-prefix} {
        &-text {
          box-shadow: none !important;
        }
      }
    }

    &-text {
      background-image: none !important;
      box-shadow: none !important;
      border-radius: 4px;

      &:hover {
        background-color: $b-design-btn-text-background-color-hover;
      }

      &:active {
        background-color: $b-design-btn-text-background-color-active;
      }
    }

    &-warning {
      &:active {
        box-shadow: $b-design-btn-warning-box-shadow;
      }
    }
  }

  &-text {
    &.#{$css-prefix} {
      &xl {
        padding: 0 $b-design-btn-size-xl-padding;
      }

      &large {
        padding: 0 $btn-size-l-padding;
      }

      &medium {
        padding: 0 $btn-size-m-padding;
      }

      &small {
        padding: 0 $btn-size-s-padding;
      }

      &xs {
        padding: 0 $b-design-btn-size-xs-padding;
      }
    }
  }

  &-type-icon {
    background-color: transparent !important;
    border: none !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: $b-design-btn-icon-padding !important;
    height: $b-design-btn-icon-height !important;
    border-radius: $b-design-btn-icon-border-radius;
  }

  &-primary {
    border-width: 0px !important;
  }

  &-primary,
  &-secondary {
    &#{$btn-prefix} {
      &-type-icon {
        &:not([disabled]):hover {
          background-color: $b-design-btn-text-background-color-hover !important;
        }

        &:not([disabled]):active {
          background-color: $b-design-btn-text-background-color-active !important;
        }
      }
    }
  }

  &-normal {
    &#{$btn-prefix} {
      &-type-icon {
        &:not([disabled]):hover {
          background-color: $btn-pure-normal-bg !important;
        }

        &:not([disabled]):active {
          background-color: $btn-pure-normal-bg-hover !important;
        }
      }
    }
  }
  

  &.#{$css-prefix} {
    &xl {
      @include next-button-size(
        $b-design-btn-size-xl-padding,
        $b-design-btn-size-xl-height,
        $b-design-btn-size-xl-font,
        $b-design-btn-size-xl-border-width,
        $b-design-btn-size-xl-corner,
        $b-design-btn-size-xl-icon-margin,
        $b-design-btn-size-xl-icon-size,
        $b-design-btn-size-xl-icon-split-size
      );

      &#{$btn-prefix} {
        &-primary {
          padding: $b-design-btn-primary-xl-padding;

          &:hover {
            box-shadow: $b-design-btn-primary-box-shadow-xl-hover;
          }

          &:active {
            box-shadow: $b-design-btn-primary-box-shadow-xl-active;
          }
        }

        &-secondary {
          &:hover {
            box-shadow: $b-design-btn-secondary-box-shadow-xl-hover;
          }

          &:active {
            box-shadow: $b-design-btn-secondary-box-shadow-xl-active;
          }
        }

        &-normal {
          &:hover {
            box-shadow: $b-design-btn-normal-box-shadow-xl-hover;
          }

          &:active {
            box-shadow: $b-design-btn-normal-box-shadow-xl-active;
          }
        }

        &-warning {
          &:hover {
            box-shadow: $b-design-btn-warning-box-shadow-xl-hover;
          }

          &:active {
            box-shadow: $b-design-btn-warning-box-shadow-xl-active;
          }
        }
      }
    }

    &large {
      &#{$btn-prefix} {
        &-primary {
          &:hover {
            box-shadow: $b-design-btn-primary-box-shadow-l-hover;
          }

          &:active {
            box-shadow: $b-design-btn-primary-box-shadow-l-active;
          }
        }

        &-secondary {
          &:hover {
            box-shadow: $b-design-btn-secondary-box-shadow-l-hover;
          }

          &:active {
            box-shadow: $b-design-btn-secondary-box-shadow-l-active;
          }
        }

        &-normal {
          &:hover {
            box-shadow: $b-design-btn-normal-box-shadow-l-hover;
          }

          &:active {
            box-shadow: $b-design-btn-normal-box-shadow-l-active;
          }
        }

        &-warning {
          &:hover {
            box-shadow: $b-design-btn-warning-box-shadow-l-hover;
          }

          &:active {
            box-shadow: $b-design-btn-warning-box-shadow-l-active;
          }
        }
      }
    }

    &medium {
      &#{$btn-prefix} {
        &-primary:not(.#{$css-prefix}-xs):not(.#{$css-prefix}-xl):not(.#{$css-prefix}split-btn-trigger) {
          padding: $b-design-btn-primary-m-padding;

          &:hover {
            box-shadow: $b-design-btn-primary-box-shadow-m-hover;
          }

          &:active {
            box-shadow: $b-design-btn-primary-box-shadow-m-active;
          }
        }

        &-secondary {
          &:hover {
            box-shadow: $b-design-btn-secondary-box-shadow-m-hover;
          }

          &:active {
            box-shadow: $b-design-btn-secondary-box-shadow-m-active;
          }
        }

        &-normal {
          &:hover {
            box-shadow: $b-design-btn-normal-box-shadow-m-hover;
          }

          &:active {
            box-shadow: $b-design-btn-normal-box-shadow-m-active;
          }
        }

        &-warning {
          &:hover {
            box-shadow: $b-design-btn-warning-box-shadow-m-hover;
          }

          &:active {
            box-shadow: $b-design-btn-warning-box-shadow-m-active;
          }
        }

        &-ghost {
          &#{$btn-prefix} {
            &-dark:hover {
              background-color: $btn-ghost-dark-bg-hover-rgb;
            }
          }
        }
      }
    }

    &small {
      &#{$btn-prefix} {
        &-primary {
          padding: $b-design-btn-primary-s-padding;

          &:hover {
            box-shadow: $b-design-btn-primary-box-shadow-s-hover;
          }

          &:active {
            box-shadow: $b-design-btn-primary-box-shadow-s-active;
          }
        }

        &-secondary {
          &:hover {
            box-shadow: $b-design-btn-secondary-box-shadow-s-hover;
          }

          &:active {
            box-shadow: $b-design-btn-secondary-box-shadow-s-active;
          }
        }

        &-normal {
          &:hover {
            box-shadow: $b-design-btn-normal-box-shadow-s-hover;
          }

          &:active {
            box-shadow: $b-design-btn-normal-box-shadow-s-active;
          }
        }

        &-warning {
          &:hover {
            box-shadow: $b-design-btn-warning-box-shadow-s-hover;
          }

          &:active {
            box-shadow: $b-design-btn-warning-box-shadow-s-active;
          }
        }
      }
    }

    &xs {
      @include next-button-size(
        $b-design-btn-size-xs-padding,
        $b-design-btn-size-xs-height,
        $b-design-btn-size-xs-font,
        $b-design-btn-size-xs-border-width,
        $b-design-btn-size-xs-corner,
        $b-design-btn-size-xs-icon-margin,
        $b-design-btn-size-xs-icon-size,
        $b-design-btn-size-xs-icon-split-size
      );

      &#{$btn-prefix} {
        &-primary {
          padding: $b-design-btn-primary-xs-padding;

          &:hover {
            box-shadow: $b-design-btn-primary-box-shadow-xs-hover;
          }

          &:active {
            box-shadow: $b-design-btn-primary-box-shadow-xs-active;
          }
        }

        &-secondary {
          &:hover {
            box-shadow: $b-design-btn-secondary-box-shadow-xs-hover;
          }

          &:active {
            box-shadow: $b-design-btn-secondary-box-shadow-xs-active;
          }
        }

        &-normal {
          &:hover {
            box-shadow: $b-design-btn-normal-box-shadow-xs-hover;
          }

          &:active {
            box-shadow: $b-design-btn-normal-box-shadow-xs-active;
          }
        }

        &-warning {
          &:hover {
            box-shadow: $b-design-btn-warning-box-shadow-xs-hover;
          }

          &:active {
            box-shadow: $b-design-btn-warning-box-shadow-xs-active;
          }
        }
      }
    }
  }

  &-group {
    #{$btn-prefix} {
      &#{$btn-prefix}-primary:not([disabled]):hover {
        background: $color-gradient-1;
      }

      &#{$btn-prefix}-secondary {
        &:hover {
          box-shadow: none;
        }

        &:active {
          background-color: $color-brand1-2;
        }

        &.disabled,
        &[disabled] {
          background-color: #fff;
        }
      }
    }
  }
}