/* LoadingSpinner — Nimiq legacy style
 * Animated hexagon loading indicator. Color comes from currentColor (inherit or set
 * `color` on the svg); default size is 54x48 via the width/height attributes.
 * Requires the Mulish font + nimiq-style.min.css only for the inherited nimiq-blue color.
 * Markup:
 *   <svg height="48" width="54" viewBox="0 0 54 48" color="inherit" class="loading-spinner">
 *     <path class="big-hex" d="..." ... />
 *     <path class="small-hex" d="..." ... />
 *   </svg>
 * Upstream uses #big-hex/#small-hex ids; classes + prefixed keyframe names are used here
 * so multiple spinners can coexist on one page.
 */

/* SVG loading animation */
/* Hexagon circumfence: 152.5 */

.loading-spinner .big-hex {
    stroke-dashoffset: -40.5;
    animation: loading-spinner-big-hex 4s cubic-bezier(0.76, 0.29, 0.29, 0.76) infinite;
}

.loading-spinner .small-hex {
    stroke-dashoffset: 13;
    animation: loading-spinner-small-hex 4s cubic-bezier(0.76, 0.29, 0.29, 0.76) infinite;
}

@keyframes loading-spinner-small-hex {
    0%   { stroke-dashoffset: 13 }
    17%  { stroke-dashoffset: 38.42 }
    33%  { stroke-dashoffset: 63.84 }
    50%  { stroke-dashoffset: 89.25 }
    67%  { stroke-dashoffset: 114.66 }
    83%  { stroke-dashoffset: 140.08 }
    100% { stroke-dashoffset: 165.5 }
}

@keyframes loading-spinner-big-hex {
    0%   { stroke-dashoffset: -40.5 }
    17%  { stroke-dashoffset: -15.08 }
    33%  { stroke-dashoffset: 10.33 }
    50%  { stroke-dashoffset: 35.75 }
    67%  { stroke-dashoffset: 61.17 }
    83%  { stroke-dashoffset: 86.58 }
    100% { stroke-dashoffset: 112 }
}