$deviceWidth: 750;

@function vmin($rpx) {
  @return #{$rpx * 100 / $deviceWidth}vmin;
}

@keyframes gradual_opacity
{
  from {opacity: 0;}
  to {opacity: 1;}
}
@mixin share-wrapper {
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 998;
    opacity: 1;
    top: 0;
    left: 0;
    //background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 18%, rgba(0,0,0,0.66) 38%, rgba(0,0,0,0.84) 60%, rgba(0,0,0,0.94) 100%);
    .wrapper {
      height: 100%;
    }
    .left-panel {
      float: left;
      height: 100%;
      width: 47.78%;
      background: rgba(0,0,0, 0.5);
      .canvasPosition {
        position: absolute;
        left:9999px;
        top:9999px;
      }
      .close {
        position: absolute;
        width: vmin(48);
        height: vmin(48);
        left: vmin(80);
        top: vmin(32);
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .share-big-picture {
        margin-top: vmin(50);
        overflow: hidden;
        width: vmin(334);
        height: vmin(650);
        margin-left: 40%;
        .preview-img {
          height: vmin(594);
          box-shadow: 0 vmin(4.1213937759399414) vmin(7.1356564521789550) 0 rgba(0,0,0,0.08);
          border-radius: vmin(10);
          overflow: hidden;
          position: relative;
          .switch-text {
            position: absolute;
            width: vmin(192);
            height: vmin(48);
            top: 30%;
            right: 0;
            border-radius: vmin(24) 0 0 vmin(24);
            opacity: 1;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(vmin(24));
            image {
              position: absolute;
              width: vmin(32);
              height: vmin(32);
              top: vmin(8);
              left: vmin(16);
            }
            text {
              margin-left: vmin(56);
              color: rgba(255,255,255,1);
              font-size: vmin(20);
              font-weight: 400;
            }
          }
          image {
            width: 100%;
            height: 100%;
            &.gradual_opacity {
              animation:gradual_opacity 0.1s alternate;
            }
          }
        }
        .save {
          margin-top: vmin(24);
          padding-left: vmin(16);
          display: flex;
          image {
            width: vmin(32);
            height: vmin(32);
            margin-right: vmin(8);
          }
          text {
            color: rgba(255,255,255,1);
            font-size: vmin(24);
            font-weight: 400;
            text-align: center;
          }
        }
      }
    }
    .right-panel {
      float: left;
      width: 52.22%;
      height: 100%;
      background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.94) 100%);
      .detail {
        width: vmin(608);
        height: vmin(320);
        margin-top: vmin(128);
        margin-right: vmin(48);
        float: right;
        padding-bottom: vmin(12);
        margin-bottom: vmin(50);
        border-bottom: vmin(2) solid rgba(255,255,255,0.1599999964237213);
        .list-view {
          margin-bottom: vmin(8);
          .scroll-view-box {
            overflow: hidden;
            white-space: nowrap;
            width: vmin(608);
            &.large {
              margin-bottom: vmin(120);
            }
            .list {
              float: left;
              position: relative;
              border: vmin(4) solid transparent;
              overflow: hidden;
              box-sizing: border-box;
              &.normal {
                width: vmin(92);
                height: vmin(160);
                margin-right: vmin(10);
                //margin-bottom: vmin(24);
                border-radius: vmin(12);
                &:not(.active) {
                  padding: vmin(8) vmin(6)
                }
                .child {
                  overflow: hidden;
                  border-radius: vmin(12);
                }
              }
              &.large {
                width: vmin(132);
                height: vmin(232);
                border-radius: vmin(16);
                margin-right: vmin(24);
                .child{
                  overflow: hidden;
                  border-radius: vmin(16);
                }
                .preview-img {
                  border-radius: vmin(12);
                }
              }
              &.active {
                transition: all 0.1s linear;
                border: vmin(4) solid #1472FF;
                .child {
                  width: 100%;
                  height: 100%;
                  padding: vmin(1);
                  box-sizing: border-box;
                }
                .selected {
                  height: vmin(32);
                  width: vmin(32);
                  position: absolute;
                  bottom: 0;
                  right: 0;
                }
              }
              &:last-child {
                margin-right: 0;
              }
              .child {
                width: 100%;
                height: 100%;
                image {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .operations {
        height: vmin(128);
        width: vmin(608);
        float: right;
        margin-right: vmin(48);
        margin-top: vmin(12);
        display: flex;
        &.once-share-poster {
          margin-top: vmin(310);
        }
        .btn {
          height: vmin(128);
          margin-right: vmin(40);
          button {
            background: none;
            outline: none;
            border: none;
            &:after {
              border: none;
            }
          }
          &.empty {
            width: vmin(80);
            height: 100%;
            position: relative;
            &:after {
              content: '';
              width: vmin(2);
              height: vmin(96);
              opacity: 0.1599999964237213;
              background: rgba(255,255,255,1);
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .icon-box {
            width: vmin(80);
            height: vmin(80);
            position: relative;
            border-radius: 50%;
            overflow: hidden;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: vmin(16);
            .opacity {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              opacity: 0.20000000298023224;
              background: rgba(255,255,255,1);
            }
            image {
              width: vmin(48);
              height: vmin(48);
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .label {
            color: rgba(255,255,255,1);
            font-size: vmin(24);
            font-weight: 400;
            font-family: "PingFang SC";
            white-space: nowrap;
          }
        }
      }
    }
  }


/*
  以下是ipad的适应
*/
@media screen and (min-height: 320px) {
  .share-wrapper {
    @include share-wrapper;
  }
}

@media screen and (min-height: 768px) and (orientation: landscape) {
  $deviceWidth: 1536 !global;

  .share-wrapper {
    @include share-wrapper;
  }
}