/******** borderSize *******/
/******** borderStyle *******/
/******** radius *******/
/******** shadow distance *******/
/******** size *******/
/******** spacing *******/
/******** shadow *******/
/******** opacity *******/
/******** fontSize *******/
/******** fontWeight ********/
/******** Primary *******/
/******** success *******/
/******** warning *******/
/******** danger *******/
/******** link *******/
/******** radius *******/
/********* icon hover *********/
.sd-dot-loading {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 8px;
  transform-style: preserve-3d;
  perspective: 200px;
}
.sd-dot-loading-item {
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: rgb(var(--sd-primary-6));
  border-radius: var(--sd-border-radius-circle);
  transform: translateX(-50%) scale(0);
  animation: sd-dot-loading 2s cubic-bezier(0, 0, 1, 1) infinite forwards;
}
.sd-dot-loading-item:nth-child(2) {
  background-color: rgb(var(--sd-primary-5));
  animation-delay: 400ms;
}
.sd-dot-loading-item:nth-child(3) {
  background-color: rgb(var(--sd-primary-4));
  animation-delay: 800ms;
}
.sd-dot-loading-item:nth-child(4) {
  background-color: rgb(var(--sd-primary-4));
  animation-delay: 1200ms;
}
.sd-dot-loading-item:nth-child(5) {
  background-color: rgb(var(--sd-primary-2));
  animation-delay: 1600ms;
}

@keyframes sd-dot-loading {
  0% {
    transform: translate3D(-48.6214897467%, 0, -0.984807753px) scale(0.5113941852);
  }
  2.7777777778% {
    transform: translate3D(-95.7656401312%, 0, -0.9396926208px) scale(0.5452305344);
  }
  5.5555555556% {
    transform: translate3D(-140%, 0, -0.8660254038px) scale(0.6004809472);
  }
  8.3333333333% {
    transform: translate3D(-179.9805307122%, 0, -0.7660444431px) scale(0.6754666677);
  }
  11.1111111111% {
    transform: translate3D(-214.4924440733%, 0, -0.6427876097px) scale(0.7679092927);
  }
  13.8888888889% {
    transform: translate3D(-242.4871130596%, 0, -0.5px) scale(0.875);
  }
  16.6666666667% {
    transform: translate3D(-263.1139338201%, 0, -0.3420201433px) scale(0.9934848925);
  }
  19.4444444444% {
    transform: translate3D(-275.7461708434%, 0, -0.1736481777px) scale(1.1197638667);
  }
  22.2222222222% {
    transform: translate3D(-280%, 0, 0px) scale(1.25);
  }
  25% {
    transform: translate3D(-275.7461708434%, 0, 0.1736481777px) scale(1.3802361333);
  }
  27.7777777778% {
    transform: translate3D(-263.1139338201%, 0, 0.3420201433px) scale(1.5065151075);
  }
  30.5555555556% {
    transform: translate3D(-242.4871130596%, 0, 0.5px) scale(1.625);
  }
  33.3333333333% {
    transform: translate3D(-214.4924440733%, 0, 0.6427876097px) scale(1.7320907073);
  }
  36.1111111111% {
    transform: translate3D(-179.9805307122%, 0, 0.7660444431px) scale(1.8245333323);
  }
  38.8888888889% {
    transform: translate3D(-140%, 0, 0.8660254038px) scale(1.8995190528);
  }
  41.6666666667% {
    transform: translate3D(-95.7656401312%, 0, 0.9396926208px) scale(1.9547694656);
  }
  44.4444444444% {
    transform: translate3D(-48.6214897467%, 0, 0.984807753px) scale(1.9886058148);
  }
  47.2222222222% {
    transform: translate3D(0%, 0, 1px) scale(2);
  }
  50% {
    transform: translate3D(48.6214897467%, 0, 0.984807753px) scale(1.9886058148);
  }
  52.7777777778% {
    transform: translate3D(95.7656401312%, 0, 0.9396926208px) scale(1.9547694656);
  }
  55.5555555556% {
    transform: translate3D(140%, 0, 0.8660254038px) scale(1.8995190528);
  }
  58.3333333333% {
    transform: translate3D(179.9805307122%, 0, 0.7660444431px) scale(1.8245333323);
  }
  61.1111111111% {
    transform: translate3D(214.4924440733%, 0, 0.6427876097px) scale(1.7320907073);
  }
  63.8888888889% {
    transform: translate3D(242.4871130596%, 0, 0.5px) scale(1.625);
  }
  66.6666666667% {
    transform: translate3D(263.1139338201%, 0, 0.3420201433px) scale(1.5065151075);
  }
  69.4444444444% {
    transform: translate3D(275.7461708434%, 0, 0.1736481777px) scale(1.3802361333);
  }
  72.2222222222% {
    transform: translate3D(280%, 0, 0px) scale(1.25);
  }
  75% {
    transform: translate3D(275.7461708434%, 0, -0.1736481777px) scale(1.1197638667);
  }
  77.7777777778% {
    transform: translate3D(263.1139338201%, 0, -0.3420201433px) scale(0.9934848925);
  }
  80.5555555556% {
    transform: translate3D(242.4871130596%, 0, -0.5px) scale(0.875);
  }
  83.3333333333% {
    transform: translate3D(214.4924440733%, 0, -0.6427876097px) scale(0.7679092927);
  }
  86.1111111111% {
    transform: translate3D(179.9805307122%, 0, -0.7660444431px) scale(0.6754666677);
  }
  88.8888888889% {
    transform: translate3D(140%, 0, -0.8660254038px) scale(0.6004809472);
  }
  91.6666666667% {
    transform: translate3D(95.7656401312%, 0, -0.9396926208px) scale(0.5452305344);
  }
  94.4444444444% {
    transform: translate3D(48.6214897467%, 0, -0.984807753px) scale(0.5113941852);
  }
  97.2222222222% {
    transform: translate3D(0%, 0, -1px) scale(0.5);
  }
}
.sd-spin-with-tip {
  text-align: center;
}
.sd-spin-icon {
  color: rgb(var(--sd-primary-6));
  font-size: 20px;
}
.sd-spin-tip {
  margin-top: 6px;
  color: rgb(var(--sd-primary-6));
  font-weight: 500;
  font-size: 14px;
}
.sd-spin-mask {
  position: absolute;
  inset: 0;
  z-index: 11;
  text-align: center;
  background-color: var(--sd-color-spin-layer-bg);
  transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
  user-select: none;
}
.sd-spin-loading {
  position: relative;
  user-select: none;
}
.sd-spin-loading .sd-spin-mask-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 12;
  transform: translate(-50%, -50%);
}
.sd-spin-loading .sd-spin-children::after {
  opacity: 1;
  pointer-events: auto;
}