/* ===== loading dots ===== */

.tool-btn .btn-dots{
  display: none;
  margin-left: 8px;
}

.tool-btn.is-loading .btn-dots{
  display: inline-flex;
}

.dots3{
  display: inline-flex;
  gap: 4px;
}

.dots3 i{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  animation: dots 1s infinite ease-in-out;
}

.dots3 i:nth-child(2){ animation-delay: .15s; }
.dots3 i:nth-child(3){ animation-delay: .3s; }

@keyframes dots{
  0%, 80%, 100%{ opacity: .25; transform: translateY(0); }
  40%{ opacity: 1; transform: translateY(-2px); }
}