@import "../../../src/themeColor.less";

.slide-verify {
  width: 100%;
  position: relative;

  canvas {
    border-radius: 20px;
  }
}
.slide-verify-loading {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 999;
  animation: loading-3f647794 1.5s infinite;
}
.slide-verify-block {
  position: absolute;
  left: 0;
  top: 0;
}
.slide-verify-refresh-icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 34px;
  cursor: pointer;
}
.slide-verify-refresh-icon .iconfont {
  font-size: 34px;
  color: #fff;
}
.slide-verify-slider {
  position: relative;
  text-align: center;
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 15px;
  background: #f7f9fa;
  color: #45494c;
  border: 1px solid #e4e7eb;
  border-radius: 25px;
}
.slide-verify-slider-mask {
  position: absolute;
  left: 0;
  top: 0;
  height: 50px;
  border-radius: 25px;
  background: @theme-color;
}
.slide-verify-slider-mask-item {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  box-shadow: 0 0 3px #0000004d;
  cursor: pointer;
  transition: background 0.2s linear;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 100%;

  img {
    width: 28px;
  }
}
.slide-verify-slider-mask-item:hover {
  background: #fff;
}

.container-active .slide-verify-slider-mask {
  border-width: 1px;
}
.container-active .slide-verify-slider-mask-item {
  top: -1px;
  border: 1px solid @theme-color;
}
.container-success .slide-verify-slider-mask {
  border: 1px solid @theme-color;
  background-color: @theme-color;
}
.container-success .slide-verify-slider-mask-item {
  top: -1px;
  border: 1px solid @theme-color;
  background-color: @theme-color !important;
}

.container-fail .slide-verify-slider-mask {
  border: 1px solid #f57a7a;
  background-color: #fce1e1;
}
.container-fail .slide-verify-slider-mask-item {
  top: -1px;
  border: 1px solid #f57a7a;
  background-color: #f57a7a !important;
}

.container-active .slide-verify-slider-text,
.container-success .slide-verify-slider-text,
.container-fail .slide-verify-slider-text {
  display: none;
}
@keyframes loading {
  0% {
    opacity: 0.7;
  }
  to {
    opacity: 9;
  }
}

.bottom-action {
  margin: 10px 0;
  cursor: pointer;
  :global {
    img {
      width: 18px;
    }

    span {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: bold;
      margin-left: 5px;
    }
  }
}
