@prefixCls: rc-image;
@zindex-preview-mask: 100;
@preview-mask-bg: fade(#000, 100%);
@text-color: #bbb;
@text-color-disabled: darken(@text-color, 30%);
@background-color: #f3f3f3;
@import url('./reset.less');

:root {
  --wanx-brand-high-light: #8a73ff;
  --wanx-brand-main: #624aff;
  --wanx-brand-main-70: #624affb3;
  --wanx-brand-main-50: #624aff80;
  --wanx-brand-main-30: #624aff4d;
  --wanx-button-hover: #452ddd;
  --wanx-bk: #070c14;
  --wanx-ge: #878aab;
  --wanx-ge-30: #2d3240;
  --wanx-ge-20: #202532;
  --wanx-ge-10: #141822;
  --wanx-wh: #fff;
  --wanx-wh-70: #b5b6b8;
  --wanx-wh-50: #838589;
  --wanx-wh-30: #52565b;
  --wanx-bu: #1f92ff;
  --wanx-gr: #00a873;
  --wanx-rd: #fe5967;
  --wanx-or: #ff753c;
  --wanx-ye: #ffb73d;
  --wanx-text-high-ligh: #8a73ff;
  --wanx-text-normal: #fff;
  --wanx-text-weak: #878aab;
  --wanx-text-very-weak: #878aaba6;
}

.reset() {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box() {
  position: absolute;
  inset: 0;
}

.@{prefixCls} {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: auto;
  border: 3px solid transparent;
  cursor: pointer;

  &-appraise {
    position: fixed;
    bottom: 12px;
    left: 50%;
    z-index: 1000;
    display: flex;
    align-items: center;
    height: 64px;
    transform: translate(-50%, -40%);

    &-bothBtn {
      justify-content: space-evenly;
      box-sizing: border-box;
      width: 124px;
      height: 40px;
      line-height: 40px;
      background: #615ced;
      border-radius: 20px;
    }

    &-icon {
      color: #f2f6ff;
      font-size: 14px;
    }

    &-right {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 14px;
        text-decoration: none;

        & > span {
          font-size: 18px;
        }
      }
    }
  }

  &-img {
    // height: auto;
    position: relative;
    width: 100%;

    &-placeholder {
      // background-repeat: no-repeat;
      // background-position: center center;
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
  }

  &-errorPic {
    position: relative;
    width: 100%;
    color: rgb(255 255 255 / 50%);
    font-size: 12px;
    background: #121721;

    img {
      width: 100%;
    }
  }

  &-placeholder {
    display: inherit;
    width: 100%;

    img {
      width: 100%;
    }
  }

  // >>> Mask
  &-mask {
    position: absolute;
    inset: 0;
    // transition: opacity 0.3s;
    z-index: @zindex-preview-mask;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-image: linear-gradient(180deg, rgb(0 0 0 / 0%) 50%, #000 80%);
    opacity: 0;
    pointer-events: none;
  }

  &-mask-but {
    padding: 0 10px;
    // background-color: var(--wanx-ge-30);
  }

  &-mask-but-icon {
    * {
      color: rgb(255 255 255 / 70%) !important;
    }
    // font-size: 20px;
  }

  &-mask-appraise {
    position: absolute;
    // left: 50%;
    right: 0;
    bottom: 0;
    z-index: @zindex-preview-mask + 3;
    color: rgb(255 255 255 / 70%);
    // transform: translateX(-50%);
    opacity: 0;
  }

  &:hover &-mask-appraise {
    opacity: 1;
  }

  &:hover &-mask {
    border-radius: 12px;
    opacity: 0.6;
  }

  // &:hover {
  //   border: 3px solid #5a59a0;
  // }

  &-error {
    cursor: initial;

    &:hover {
      border-color: transparent;
    }
  }

  &-preview {
    height: 100%;
    text-align: center;
    pointer-events: none;

    &-body {
      .box;

      overflow: hidden;
    }

    &.zoom-enter,
    &.zoom-appear {
      transform: none;
      opacity: 0;
      animation-duration: 0.3s;
    }

    &-mask {
      position: fixed;
      inset: 0;
      z-index: @zindex-preview-mask;
      height: 100%;
      background: rgb(77 80 93 / 50%) !important;
      backdrop-filter: blur(10px);
      // background-color: fade(@preview-mask-bg, 45%);
      transition-duration: 0;

      &-hidden {
        display: none;
      }
    }

    &-img {
      max-width: 70%;
      max-height: 70%;
      vertical-align: middle;
      transform: scale3d(1, 1, 1);
      cursor: grab;
      transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
      user-select: none;
      pointer-events: auto;

      &-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70%;
        height: 70%;
        color: #fff;
        font-size: 60px;

        > span {
          animation: loading 3s ease-in-out infinite;
        }
      }

      &-errorPic {
        position: relative;
        width: 100%;
        color: rgb(255 255 255 / 50%);
        font-size: 24px;
        backdrop-filter: blur(10px);

        img {
          width: 100%;
        }
      }

      &-wrapper {
        .box;

        display: flex;
        align-items: center;
        justify-content: center;

        // &::before {
        //   content: '';
        //   display: inline-block;
        //   height: 50%;
        //   width: 1px;
        //   margin-right: -1px;
        // }
      }
    }

    &-loading {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      pointer-events: none;
    }

    &-appraise {
      position: fixed;
      bottom: 12px;
      left: 50%;
      z-index: 1000;
      display: flex;
      align-items: center;
      height: 64px;
      transform: translate(-50%, -40%);

      &-icon {
        color: #f2f6ff;
        font-size: 34px;
      }
    }

    &-moving {
      .@{prefixCls}-preview-img {
        cursor: grabbing;

        &-wrapper {
          transition-duration: 0s;
        }
      }
    }

    &-wrap {
      position: fixed;
      inset: 0;
      z-index: @zindex-preview-mask;
      overflow: auto;
      outline: 0;
      -webkit-overflow-scrolling: touch;
    }

    &-operations-wrapper {
      position: fixed;
      z-index: @zindex-preview-mask + 1;
    }

    &-operations-section {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 144px;
      height: 40px;
      margin-right: 24px;
      background-color: #fff;
      border-radius: 60px;

      li {
        &:nth-child(n + 2) {
          position: relative;

          &::after {
            position: absolute;
            top: 50%;
            left: 0;
            width: 1px;
            height: 12px;
            background: rgb(255 255 255 / 10%);
            transform: translateY(-50%);
            content: '';
          }
        }
      }
    }

    &-operations {
      .reset;

      position: fixed;
      top: 0;
      right: 0;
      z-index: @zindex-preview-mask + 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      margin: 28px 26px 0 0;
      color: @text-color;
      list-style: none;
      pointer-events: auto;

      > li {
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0 !important;
        color: var(--text-gray-1);
        background: #fff;
        border-radius: 50%;
      }

      &-progress {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      &-operation:not(:last-child) {
        & > span::after {
          position: absolute;
          top: 10px;
          right: 0;
          width: 1px;
          height: 12px;
          background: #b7b9cd;
          content: '';
        }
      }

      &-operation {
        position: relative;
        display: flex;
        align-items: center;
        height: 32px;
        padding: 0 12px;
        cursor: pointer;

        &-disabled {
          cursor: not-allowed;
          pointer-events: none;

          & > span[role='img'] {
            color: rgb(242 246 255 / 30%);
          }
        }

        &:last-of-type {
          margin-left: 0;
        }
      }

      &-icon {
        font-size: 22px;
      }
    }

    &-switch-left {
      position: fixed;
      top: 50%;
      left: 30px;
      z-index: @zindex-preview-mask + 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      color: @text-color;
      // background: fade(@text-color, 45%);
      border-radius: 50%;
      cursor: pointer;
      opacity: 0.7;
      pointer-events: auto;

      & > span[role='img'] {
        color: #f2f6ff;
        font-size: 50px;
      }

      &:hover {
        opacity: 1;
      }

      &-disabled {
        cursor: not-allowed;
        // background: fade(@text-color, 30%);
        // color: @text-color-disabled;
        opacity: 0.3;

        > .anticon {
          cursor: not-allowed;
        }

        &:hover {
          opacity: 0.3;
        }
      }

      > .anticon {
        font-size: 24px;
      }
    }

    &-switch-right {
      position: fixed;
      top: 50%;
      right: 30px;
      z-index: @zindex-preview-mask + 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      color: @text-color;
      // background: fade(@text-color, 45%);
      border-radius: 50%;
      cursor: pointer;
      opacity: 0.7;
      transition-duration: 0.2s;
      pointer-events: auto;

      & > span[role='img'] {
        color: #f2f6ff;
        font-size: 50px;
      }

      &:hover {
        opacity: 1;
      }

      &-disabled {
        cursor: not-allowed;
        opacity: 0.3;

        > .anticon {
          cursor: not-allowed;
        }

        &:hover {
          opacity: 0.3;
        }
      }

      > .anticon {
        font-size: 24px;
      }
    }
  }
}

.fade-enter,
.fade-appear {
  animation-duration: 0.3s;
  animation-play-state: paused;
  animation-fill-mode: both;
}

.fade-leave {
  animation-duration: 0.3s;
  animation-play-state: paused;
  animation-fill-mode: both;
}

.fade-enter.fade-enter-active,
.fade-appear.fade-appear-active {
  animation-name: rcImageFadeIn;
  animation-play-state: running;
}

.fade-leave.fade-leave-active {
  animation-name: rcImageFadeOut;
  animation-play-state: running;
  pointer-events: none;
}

.fade-enter,
.fade-appear {
  opacity: 0;
  animation-timing-function: linear;
}

.fade-leave {
  animation-timing-function: linear;
}

@keyframes rcImageFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes rcImageFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.zoom-enter,
.zoom-appear {
  animation-duration: 0.3s;
  animation-play-state: paused;
  animation-fill-mode: both;
}

.zoom-leave {
  animation-duration: 0.3s;
  animation-play-state: paused;
  animation-fill-mode: both;
}

.zoom-enter.zoom-enter-active,
.zoom-appear.zoom-appear-active {
  animation-name: rcImageZoomIn;
  animation-play-state: running;
}

.zoom-leave.zoom-leave-active {
  animation-name: rcImageZoomOut;
  animation-play-state: running;
  pointer-events: none;
}

.zoom-enter,
.zoom-appear {
  transform: scale(0);
  opacity: 0;
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}

.zoom-leave {
  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

@keyframes rcImageZoomIn {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rcImageZoomOut {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.2);
    opacity: 0;
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 768px) {
  .rc-image-preview-img {
    max-width: 100%;
    // max-height: 100%;
  }

  .rc-image-preview-img-loading {
    width: 100%;
    height: 100%;
  }

  .rc-image-preview-img-errorPic {
    width: 100vw;
    height: 100%;
    padding: 32px;
  }

  .rc-image-preview-operations {
    justify-content: flex-start;
    width: 100%;
    padding-left: 40px;

    > span[role='img'] {
      color: rgb(242 246 255 / 70%);
    }

    > li {
      background: none;
      backdrop-filter: none;
    }
  }

  .rc-image-preview-operations-operation > span[role='img'] {
    color: rgb(242 246 255 / 70%);
  }
}
