:host {
  display: inline-flex;
  color: var(--color);
  user-select: none;
}
:host svg {
  width: 100%;
  height: 100%;
  transform: translateZ(0);
}
:host circle {
  animation: dash-rotate 1.4s ease-in-out infinite;
  fill: transparent;
  stroke-dasharray: 80px, 200px;
  stroke-dashoffset: 0px;
  stroke-width: 3.6px;
  stroke: currentColor;
}
:host svg {
  animation: spinner-rotate 1.4s linear infinite;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

:host(.lu-color) {
  color: var(--lu-color-base);
}

:host([data-paused]) svg,
:host([data-paused]) circle {
  animation-play-state: paused;
}

:host([data-hidden]) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  width: 1px;
  height: 1px;
  /* stylelint-disable-next-line declaration-no-important */
  overflow: hidden !important;
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  clip: rect(1px, 1px, 1px, 1px);
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash-rotate {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0px;
  }
  50% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
  }
  100% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -125px;
  }
}