/*
 * Reusable Quardlyn loading indicator.
 * The centre artwork is the existing Quardlyn brand asset and is never animated.
 */
.quardlyn-loader {
    --quardlyn-loader-size: 92px;
    position: relative;
    display: inline-flex;
    width: var(--quardlyn-loader-size);
    height: var(--quardlyn-loader-size);
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.quardlyn-loader--small {
    --quardlyn-loader-size: 56px;
}

.quardlyn-loader--large {
    --quardlyn-loader-size: 112px;
}

.quardlyn-loader__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: quardlyn-loader-rotate 1.35s linear infinite;
}

.quardlyn-loader__dots {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: .01 32.977;
    transform-origin: 50px 50px;
    animation: quardlyn-loader-pulse 1.1s ease-in-out infinite alternate;
}

.quardlyn-loader__dots--navy {
    stroke: #0a467f;
}

.quardlyn-loader__dots--blue {
    stroke: #137dc5;
    stroke-dashoffset: -8.244;
    animation-delay: -.25s;
}

.quardlyn-loader__dots--light-blue {
    stroke: #76b8e8;
    stroke-dashoffset: -16.488;
    animation-delay: -.5s;
}

.quardlyn-loader__dots--orange {
    stroke: #ef4a26;
    stroke-dashoffset: -24.733;
    animation-delay: -.75s;
}

.quardlyn-loader__mark {
    position: relative;
    z-index: 1;
    display: block;
    width: 38%;
    height: 38%;
    object-fit: contain;
}

.quardlyn-loader-overlay {
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .94);
    transition: opacity .16s ease;
}

.quardlyn-loader-overlay[hidden] {
    display: none !important;
}

.quardlyn-loader-overlay--local {
    position: absolute;
    min-height: 120px;
}

body.quardlyn-loader-visible {
    cursor: progress;
}

.quardlyn-loader-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes quardlyn-loader-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes quardlyn-loader-pulse {
    from {
        opacity: .42;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quardlyn-loader__ring,
    .quardlyn-loader__dots {
        animation: none;
    }

    .quardlyn-loader-overlay {
        transition: none;
    }
}