@import "../../styles/mixins.module";
@import "../../styles/parents.module";

.calc-sliding-verifier-scoped {
  width: auto;
  height: auto;
  :global {
    .calc-sliding-verifier {
      position: relative;
      background-color: #e8e8e8;
      text-align: center;
      overflow: hidden;
      .dv_handler {
        position: absolute;
        top: 0px;
        left: 0px;
        cursor: move;
        // display: flex;
        // flex-direction: row;
        // justify-content: center;
        // align-items: center;
        @include flex-row(center, center);
        .handler-icon {
          transition: all 0.18s linear;
          padding-left: 0;
          font-size: 16px;
        }
        .el-icon-circle-check {
          color: #66cc66;
          margin-top: 9px;
        }
      }
      .dv_progress_bar {
        position: absolute;
        height: 34px;
        width: 0px;
      }
      .dv_text {
        position: absolute;
        top: 0px;
        color: transparent;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        background: -webkit-gradient(
          linear,
          left top,
          right top,
          color-stop(0, var(--textColor)),
          color-stop(0.4, var(--textColor)),
          color-stop(0.5, #ffffff),
          color-stop(0.6, var(--textColor)),
          color-stop(1, var(--textColor))
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-size-adjust: none;
        animation: slidetounlock 3s infinite;
        * {
          -webkit-text-fill-color: var(--textColor);
        }
      }
      .goFirst {
        left: 0px !important;
        transition: left 0.5s;
      }
      .goFirst2 {
        width: 0px !important;
        transition: width 0.5s;
      }
    }
  }
}

@keyframes:global (slidetounlock) {
  0% {
    background-position: var(--pwidth) 0;
  }
  100% {
    background-position: var(--width) 0;
  }
}
@-webkit-keyframes:global (slidetounlock) {
  0% {
    background-position: var(--pwidth) 0;
  }
  100% {
    background-position: var(--width) 0;
  }
}

@keyframes:global (slidetounlock2) {
  0% {
    background-position: var(--pwidth) 0;
  }
  100% {
    background-position: var(--pwidth) 0;
  }
}
@-webkit-keyframes:global (slidetounlock2) {
  0% {
    background-position: var(--pwidth) 0;
  }
  100% {
    background-position: var(--pwidth) 0;
  }
}