@import "../../styles/variable";

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
  font-size: @weuiBtnFontSize;
  text-align: center;
  text-decoration: none;
  line-height: unit(@weuiBtnHeight/@weuiBtnFontSize);
  border-radius: @weuiBtnBorderRadius;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  cursor: pointer;
  color: @weuiBtnDefaultFontColor;
  background-color: @weuiBtnDefaultBg;

  &([hidden]) {
    display: none !important;
  }

  &::after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transform: scale(0.5);
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: @weuiBtnBorderRadius*2;
  }

  /* disabled */
  &([disabled]) {
    color: @weuiBtnDisabledFontColor;
  }

  &([disabled][type=default]),
  &([disabled]:not([type])) {
    color: @weuiBtnDefaultDisabledFontColor;
    background-color: @weuiBtnDefaultDisabledBg;
  }

  &([disabled][type=primary]) {
    background-color: @weuiBtnPrimaryDisabledBg;
  }

  &([disabled][type=warn]) {
    background-color: @weuiBtnwarnDisabledBg;
  }

  /* loading */
  &([loading]) {
    &::before {
      content: " ";
      display: inline-block;
      width: 18px;
      height: 18px;
      vertical-align: middle;
      animation: wx-button-loading-animate 1s steps(12, end) infinite;
      background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
      background-size: 100%;
    }
  }

  &([loading][type=primary]) {
    color: @weuiBtnActiveFontColor;
    background-color: @weuiBtnPrimaryActiveBg;
  }

  &([loading][type=primary][plain]) {
    color: @weuiBtnPlainPrimaryColor;
    background-color: transparent;
  }

  &([loading][type=default]) {
    color: @weuiBtnDefaultActiveFontColor;
    background-color: @weuiBtnDefaultActiveBg;
  }

  &([loading][type=default][plain]) {
    color: @weuiBtnPlainDefaultColor;
    background-color: transparent;
  }

  &([loading][type=warn]) {
    color: @weuiBtnActiveFontColor;
    background-color: @weuiBtnWarnActiveBg;
  }

  &([loading][type=warn][plain]) {
    color: @weuiBtnPlainWarnColor;
    background-color: transparent;
  }

  /* size */
  &([size=mini]) {
    display: inline-block;
    line-height: @weuiBtnMiniHeight;
    font-size: @weuiBtnMiniFontSize;
    padding: 0 1.34em;
  }

  /* primary */
  &([type=primary]) {
    color: @weuiBtnFontColor;
    background-color: @weuiBtnPrimaryBg;
  }

  &([type=primary][plain]) {
    color: @weuiBtnPlainPrimaryColor;
    border: 1px solid @weuiBtnPlainPrimaryBorderColor;
    background-color: transparent;

    &::after {
      border-width: 0;
    }
  }

  &([type=primary][plain][disabled]) {
    color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
  }

  /* default */
  &([type=default]) {
    color: @weuiBtnDefaultFontColor;
    background-color: @weuiBtnDefaultBg;
  }

  &([type=default][plain]) {
    color: @weuiBtnPlainDefaultColor;
    border: 1px solid @weuiBtnPlainDefaultBorderColor;
    background-color: transparent;

    &::after {
      border-width: 0;
    }
  }

  &([type=default][plain][disabled]) {
    color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
  }

  /* plain */
  &([plain]) {
    color: @weuiBtnPlainDefaultColor;
    border: 1px solid @weuiBtnPlainDefaultBorderColor;
    background-color: transparent;

    &::after {
      border-width: 0;
    }
  }

  &([plain][disabled]) {
    color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
  }

  /* warn */
  &([type=warn]) {
    color: @weuiBtnFontColor;
    background-color: @weuiBtnWarnBg;
  }

  &([type=warn][plain]) {
    color: @weuiBtnPlainWarnColor;
    border: 1px solid @weuiBtnPlainWarnBorderColor;
    background-color: transparent;

    &::after {
      border-width: 0;
    }
  }

  &([type=warn][plain][disabled]) {
    color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
  }

  /* hover */
  &(.button-hover) {
    color: @weuiBtnDefaultActiveFontColor;
    background-color: @weuiBtnDefaultActiveBg;
  }

  &(.button-hover[plain]) {
    color: @weuiBtnPlainDefaultActiveColor;
    border-color: @weuiBtnPlainDefaultActiveBorderColor;
    background-color: transparent;
  }

  &(.button-hover[type=primary]) {
    color: @weuiBtnActiveFontColor;
    background-color: @weuiBtnPrimaryActiveBg;
  }

  &(.button-hover[type=primary][plain]) {
    color: @weuiBtnPlainPrimaryActiveColor;
    border-color: @weuiBtnPlainPrimaryActiveBorderColor;
    background-color: transparent;
  }

  &(.button-hover[type=default]) {
    color: @weuiBtnDefaultActiveFontColor;
    background-color: @weuiBtnDefaultActiveBg;
  }

  &(.button-hover[type=default][plain]) {
    color: @weuiBtnPlainDefaultActiveColor;
    border-color: @weuiBtnPlainDefaultActiveBorderColor;
    background-color: transparent;
  }

  &(.button-hover[type=warn]) {
    color: @weuiBtnActiveFontColor;
    background-color: @weuiBtnWarnActiveBg;
  }

  &(.button-hover[type=warn][plain]) {
    color: @weuiBtnPlainWarnActiveColor;
    border-color: @weuiBtnPlainWarnActiveBorderColor;
    background-color: transparent;
  }
}

@keyframes wx-button-loading-animate {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@media (prefers-color-scheme: dark) {
  :host {
    color: @weuiBtnDefaultFontColorDark;
    background-color: @weuiBtnDefaultBgDark;

    &::after {
      border-color: #2d2d2d;
    }

    /* disabled */
    &([disabled]) {
      color: @weuiBtnDisabledFontColorDark;
    }

    &([disabled][type=default]),
    &([disabled]:not([type])) {
      color: @weuiBtnDefaultDisabledFontColorDark;
      background-color: @weuiBtnDefaultDisabledBgDark;
    }

    /* primary */
    &([type=primary][plain][disabled]) {
      color: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.08);
    }

    /* default */
    &([type=default]) {
      color: @weuiBtnDefaultFontColorDark;
      background-color: @weuiBtnDefaultBgDark;
    }

    &([type=default][plain]) {
      color: @weuiBtnPlainDefaultColorDark;
      border: 1px solid @weuiBtnPlainDefaultBorderColorDark;
      background-color: transparent;
    }

    &([type=default][plain][disabled]) {
      color: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.2);
    }

    /* hover */
    &(.button-hover) {
      color: @weuiBtnDefaultActiveFontColorDark;
      background-color: @weuiBtnDefaultActiveBgDark;
    }

    &(.button-hover[plain]) {
      color: @weuiBtnPlainDefaultActiveColorDark;
      border-color: @weuiBtnPlainDefaultActiveBorderColorDark;
      background-color: transparent;
    }

    &(.button-hover[type=default]) {
      color: @weuiBtnDefaultActiveFontColorDark;
      background-color: @weuiBtnDefaultActiveBgDark;
    }

    &(.button-hover[type=default][plain]) {
      color: @weuiBtnPlainDefaultActiveColorDark;
      border-color: @weuiBtnPlainDefaultActiveBorderColorDark;
      background-color: transparent;
    }
  }
}