@import "../common/variables";
@import "../common/mixins";

@icon-success: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAByFBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8ip6xsAAAAl3RSTlMAAQIDBAYHCAkKCwwNDg8SFBUWFx0fICEkJygpLi8wMTQ1NzxAQUVGR0hJSktMTU5PUFFSVVhZWlxda2xtb3Byc3R1dnd4e3yCg4SMjo+Qk5SYmZydnqeoq6ytsLe4ubq7vL2+v8DDxMXGyMrOz9DR0tXW19jZ2tvc3d7f4OHi4+Tl5ufp6uvs7e7v8PHy8/T19vn7/P3++FiVSgAAA/NJREFUWMOtmf9DEncYxx8xEbMtYJEoY5VtqWs5wXI1WtZcONsqm83cFxa1NtNVTk1sYxQWYhjzMJXXv7sfLkZwHNwd9/zG5/Pc67jPPZ/383yeE6lv7hORyfhSZovXL/9aiE9GTrjFunUMXn1UpMqKj64OdlihOfqnlTIml8vtlX8p0/0Ok7jOC0n12vTM+PARj0NExOU5Mjw+k1bHkxc6TeBcX2YBdu9E/NpJf+TOLkB2zGWUdyYFkLj0np6D99IKQOqMIZzvZ4CHp+uukuP0Q4CYrzHvbB5InGpp5NdyKgHkzzZwa78JbI+3GXmUtvFt4Pv2ej7eOWC2y+hid80Cc946Dk+geKXVeDi0ThThie4fCKyBEjYXsEMKrAVqz/mfQfaY2R11bB2e+WvNeFb171XPAmuw6qnxzuZhvcfKrg+sw7xTMzwFhV5rqtRbgClNPEMxbFXnQkWoinBfHr61rpwTkK/chTGYb7MObP0dYhX6AkqXNGFdCoy8pfUpGJWmbBRS5cwwBov7mgPuW4Kx//U+CyelSfsENkpZ4TzMSdM2B+ffqO/fMNQ8cAiSqsr3w2OHecDxd6uywgoMiIjINETN8/oKf1QRo3BLRKRDYc9ngQc/Ve22PZT9IhKC38zztmuo4D0IicgN+MIWnkTghogkIGgLT/yQEPFCtsUWnkgavDIAP9jEkxn4WC6bDRp9nkThskypr8YOnoRgSu7CBzbxJAi/yjK4beKJG5Ylw57DJp44imTkX17ZxRN5xZZATjvxTq8lnrwEec2mljdb+NAKT3IgG+xoxn8ELdEAT3bYkiRoatDu51D4yDyvHTLyJ2hLJy3RCE8Nm7s1xaaaaIgnQbint/UqicZ46tbTE4e3iQZ5qjjoyleZ2G+QJzNwso7AloiGearAyiq8L3WIxnlqCpDv9JNU93MoGObJ52qSCkFc6hAN8ySuBsx+hV3d01X3C+M8766a6OUWXNT16nlhlCcX35QiMgDL+om0xyjP8bhULDmSdpVz/zhsLjhL0dK5YXNJbHvRbv+xQkZgq+mDz2c2H81+qRg5nIdvrAO/hnzVE55r9nh7zuYD+E3NqHMe1rsttwja7Wti9Og0MUT8acgcNcs7moG0joAEnoJiUiY+VeCp7nMdWoTihNlW1eIhfYeD98030+4frOfivG623Xfd2cAtvGmmIbk53PjGvhjAg0Yt0wcAscOGlmYkBbAyqpsLvaNqU3fE6GK7xtS28+3abefbatv5K5eJ8DpQboxHw0F3i4iI0x0MR8uN8QMmd0BF676Yy+V2mmrdq5lh8NqC9uPCwjVrHxdKktEXmYwvZRRQMkvxyUifp8EF/wHnSfXkuFtvVAAAAABJRU5ErkJggg==';
@icon-error: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAABxVBMVEX////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////sayP7AAAAlnRSTlMAAQIDBAYHCAkKCwwNDxIUFRYXGx0fICEkJygpLi8wMTQ1Njc/QEVGR0hJSktMTU5PUFFSVVhZWlxda2xtbm9wcnN0dXZ3eHt8goOEjI6PkJOUmJmcnZ6nqKust7i5uru8vb6/wMHCw8TFxsfIzs/Q0dLV1tfY2drb3N3e3+Dh4uPk5enq6+zt7u/w8fLz9PX2+fv8/f7QXI1oAAAENklEQVRYw62Z70NTVRjHH4b8dsJSZEmkhilkEgMlbTbRiCGVimFIkdM00w2VAAGL0DGGw8VFgfv5e3txpcF27r3nbjvvOOfhs91zn+d7nvOdiPNoPBkeic2k1nn3+q+p2Ej4ZKMUP+q6rj0zyRvms2tddcXQfB1jRg6TyWS2c38ZYx0+j7iGS4vW/ybHh3qPNvlERGqbjvYOjSet+cVLDR5wtd+kAbbuhoOFi8Hw3S2A9ECtLu/cEsD8lQ/sAgJX5gCWzmnhmn8BeHrWcZd8Z58CTDS7885ngfkzFW5xFWfmgex5l7CaW8DboSqdR6kaegv8VOMUE4gDj1p0N7vlERAPOAS8APO7Sv10qBw24YXtF2hdBqPHW8J2G7Dcql4LvoL0ca8VdXwFXgVVK00L9p/lNFqXYaFJ8c4mYeVIMVXfugKT1QXTo7DRXpwqtW/AaEE+g9lTrM6FTMjL8OYs/FC8cg5Ddm8VTsBkVfHAyj9gYo++gNEiJYwWA/p2af0S9EtJox+WcifDAEzvKw24bwYG/tf7NJyWEsfnsLpzKlyEuJQ84nDxvfr+Dd2lA7th0VL5DnjuKx3om4NOEREZg6iUYUThtohIncG2+qyxVVr1QvM2Rr2IhOCBMqD+wddqXuT3euX8fQiJyE2IKHkPMZXEiMlDJTEMN0VkHtpUy/5JlMSICQm/UvJhXiQAafUhrCba80SSEJBO+Nlm7/2JQqITT8bhMxl0SBp/AsyINk+iMCij1qvRIzrzJASjcg8+Fk2iC0/a4DeZBae2eTfRjSeNMCspth0LOUeMmBD3O5azSUr+5Y1zie4Q3Xkib1gXyIgOUYcnr0HeseYmI/44mDo8yYCssik6RB2ebLIui1DjGjgIMOgaVgMp+ROa3AIjJuTXjG3a3LMRm/x6S2gQ2+C+c+ntyme/BjEEo47isKc+NIhRGHSSr7x6U6lZgXyddhDYgvp1JSYhILIAH2nxXInWESA/2hxSKn1xJn5lHVIhiGnyXIgxK2HqDbYCmjxHYmDLOujlNly24xXWrz3x8vtWRDphVvGeDxpqPfAnwDioUNfnO82Sb1Hdzp3YUOuLP7Hxqbqd+8fn3HB+YqNX/nabhnMnWxpWy9wSl71pL/+1QvpgveSLz5dlvpr9umfmcBa+Lx54FbJ5T3ih1OvthTJfwG8VzFZPwsqHRVsENeUzMY7YmBgiwSSkjnnlHUtBMmjz3V+C4fHW94UBL22f69A0mMNerarpQ/YBBx57N9MeH3AKqb7h1e67Ue0S1rPmxZBc69WwTCcAnrhZpk8AJg5rbU3fEsBcv63TGOi3TN0+3c2uHbBs5ztq2/mOZTt/W+shvfbnjPFoT1tjhYhIdWNbTzRnjO/3aiHstu7NTCazWZJ1b50MXdenCn9cmLpe3I8LO5JxKjwSm0kZYKRmYiPhU24N+X9p2xPwBOaSwgAAAABJRU5ErkJggg==';
@icon-loading: 'data:image/png;base64,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';

@keyframes ac-kf-zoom-in {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes ac-kf-down-in {
  0% {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ac-kf-up-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
}

@keyframes ac-kf-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.@{css-prefix} {
  &-dialog {
    &-black-mask {
      .mask(rgba(0, 0, 0, .5), @base-zindex * 2000);
    }

    &-white-mask {
      .mask(rgba(0, 0, 0, 0), @base-zindex * 2000);
    }
  }

  // Confirm =================
  &-confirm {
    width: 85%;
    background-color: #FAFAFA;
    border-radius: 2px;
    font-size: 15px;
    animation: ac-kf-zoom-in .15s ease forwards;

    &-hd {
      text-align: left;
      padding: 15px 20px 5px;
    }

    &-title {
      font-weight: normal;
      color: #444;
      word-break: break-all;
    }

    &-bd {
      text-align: left;
      padding: 0 20px;
      font-size: 14px;
      color: #888;
      line-height: 20px;
      word-break: break-all;
    }

    &-ft {
      position: relative;
      line-height: 40px;
      margin-top: 14px;
      display: flex;
      &:after {
        .top-line(@line-color);
      }
      > a {
        position: relative;
        text-align: center;
        display: block;
        flex: 1;
        padding: 0 2px;
        &:not(:last-child):after {
          .right-line(@line-color);
        }
        &.default {
          color: #353535;
        }
        &.primary {
          color: #0BB20C;
        }
      }
    }
  }

  // Alert =================
  &-alert {
    animation: ac-kf-zoom-in .15s ease forwards;
    .@{css-prefix}-confirm-bd {
      text-align: center;
      padding: 20px 20px 0 20px;
    }
    .@{css-prefix}-confirm-ft {
      margin-top: 14px;
    }
  }

  // Toast =================
  &-toast {
    min-width: 124px;
    max-width: 80%;
    padding-top: 27px;
    background: rgba(40, 40, 40, .85);
    text-align: center;
    border-radius: 3px;
    color: #FFF;
    animation: ac-kf-zoom-in .06s ease forwards;

    &-none-icon {
      padding-top: 10px;
      border-radius: 3px;
      .@{css-prefix}-toast-content {
        padding: 0 36px 10px 36px;
      }
    }

    &-content {
      font-size: 14px;
      padding: 0 15px 22px 15px;
      line-height: 22px;
      word-break: break-all;
    }

    &-success-icon,
    &-error-icon {
      display: block;
      margin-bottom: 6px;
      &:after {
        display: inline-block;
        content: '';
      }
    }

    &-success-icon:after {
      width: 38px;
      height: 38px;
      background: url(@icon-success) no-repeat;
      background-size: 38px 38px;
    }

    &-error-icon:after {
      width: 35px;
      height: 35px;
      background: url(@icon-error) no-repeat;
      background-size: 35px 35px;
    }
  }

  // Notify =================
  &-notify {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(40, 40, 40, .85);
    line-height: .28rem;
    font-size: .26rem;
    color: #FFF;
    padding: .3rem .24rem;
    opacity: 0;
    animation: ac-kf-down-in .2s linear forwards;
    word-break: break-all;
    text-align: center;
    z-index: @base-zindex * 2000;
    &-out {
      opacity: 1;
      animation: ac-kf-up-out .15s linear forwards;
    }
  }

  // Loading =================
  &-loading {
    border-radius: 3px;
    color: #FFF;
    background-color: rgba(40, 40, 40, .85);
    animation: ac-kf-zoom-in .1s ease forwards;
    display: flex;
    align-items: center;
    padding: 0 23px 0 24px;
    height: 48px;
    &-icon {
      width: 28px;
      height: 28px;
      background: url(@icon-loading) no-repeat;
      background-size: 28px 28px;
      animation: ac-kf-rotate .45s linear forwards infinite;
      margin-right: 10px;
    }
    &-txt {
      font-size: 15px;
      color: #FFF;
      max-width: 140px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

@media screen and (min-width: 768px) {
  .@{css-prefix}-confirm {
    width: 40%;
  }
}