.q-spinner
  vertical-align: middle
  // relies on the root svg's explicit width/height: they keep the box
  // identical under the size containment applied while offscreen
  content-visibility: auto

.q-spinner-mat
  .path
    stroke-dasharray: 1, 200 #{"/* rtl:ignore */"}
    stroke-dashoffset: 0 #{"/* rtl:ignore */"}
    // SVG elements default to transform-origin 0 0; pin the rotation
    // to the circle's center (viewBox units)
    transform-origin: 25px 25px
    animation: q-spin 2s linear infinite, q-mat-dash 1.5s ease-in-out infinite

@keyframes q-spin
  0%
    transform: rotate(0deg) #{"/* rtl:ignore */"}
  25%
    transform: rotate(90deg) #{"/* rtl:ignore */"}
  50%
    transform: rotate(180deg) #{"/* rtl:ignore */"}
  75%
    transform: rotate(270deg) #{"/* rtl:ignore */"}
  100%
    transform: rotate(359deg) #{"/* rtl:ignore */"}

@keyframes q-mat-dash
  0%
    stroke-dasharray: 1, 200
    stroke-dashoffset: 0
  50%
    stroke-dasharray: 89, 200
    stroke-dashoffset: -35px
  100%
    stroke-dasharray: 89, 200
    stroke-dashoffset: -124px