/* _vars imported */
/* Color naming from: http://chir.ag/projects/name-that-color/#6195ED */
.crm-loader-1 {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--leading-color);
  --_m:
          conic-gradient(#0000 10%, #000),
          linear-gradient(#000, #000) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}

.crm-loader-1.loader-preview {
  width: 25px;
  padding: 4px;
}

.crm-loader-1.loader-animate,
.crm-loader-1.loader-preview:hover {
  animation: loader-1 1s infinite linear;
}

@keyframes loader-1 {
  to {
    transform: rotate(1turn);
  }
}
.crm-loader-2 {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid color-mix(in srgb, var(--leading-color) 30%, white 50%);
  border-right-color: var(--leading-color);
}

.crm-loader-2.loader-preview {
  width: 25px;
  border-width: 4px;
}

.crm-loader-2.loader-animate,
.crm-loader-2.loader-preview:hover {
  animation: loader-2 1s infinite linear;
}

@keyframes loader-2 {
  to {
    transform: rotate(1turn);
  }
}
.crm-loader-3 {
  width: 50px;
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(rgba(0, 0, 0, 0) 10%, var(--leading-color)) content-box;
  -webkit-mask: repeating-conic-gradient(rgba(0, 0, 0, 0) 0deg, #000 1deg 20deg, rgba(0, 0, 0, 0) 21deg 36deg), radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}

.crm-loader-3.loader-preview {
  width: 25px;
  --b: 4px;
}

.crm-loader-3.loader-animate,
.crm-loader-3.loader-preview:hover {
  animation: loader-3 1s infinite steps(10);
}

@keyframes loader-3 {
  to {
    transform: rotate(1turn);
  }
}
.crm-loader-4 {
  width: 50px;
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--leading-color);
  -webkit-mask: repeating-conic-gradient(rgba(0, 0, 0, 0) 0deg, #000 1deg 70deg, rgba(0, 0, 0, 0) 71deg 90deg), radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}

.crm-loader-4.loader-preview {
  width: 25px;
  --b: 4px;
}

.crm-loader-4.loader-animate,
.crm-loader-4.loader-preview:hover {
  animation: loader-4 1s infinite;
}

@keyframes loader-4 {
  to {
    transform: rotate(0.5turn);
  }
}
.crm-loader-5 {
  width: 40px;
  aspect-ratio: 1;
  --c: linear-gradient(to right, var(--leading-color) 0%, var(--leading-color) 100%);
  --r1: radial-gradient(farthest-side at bottom, var(--leading-color) 93%, transparent 100%);
  --r2: radial-gradient(farthest-side at top, var(--leading-color) 93%, transparent 100%);
  background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
  background-repeat: no-repeat;
}

.crm-loader-5.loader-animate,
.crm-loader-5.loader-preview:hover {
  animation: loader-5 0.8s infinite alternate;
}

.crm-loader-5.loader-preview {
  width: 30px;
  background-size: 8px 0, 8px 4px, 8px 4px;
  background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
}

@keyframes loader-5 {
  0%, 5% {
    background-size: 8px 0, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
  }
  95%, 100% {
    background-size: 8px 100%, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 -2px, 0 calc(100% + 2px), 50% 50%, 50% -2px, 50% calc(100% + 2px), 100% 50%, 100% -2px, 100% calc(100% + 2px);
  }
}

/*# sourceMappingURL=crmLoader.css.map */