/*
 * Canonical loading indicator: the three-dot flash first used by the size-guide sheet.
 * Legacy aliases keep existing AJAX contracts operational while sharing one visual.
 */
:is(.amin-loader, .mainloader, .btn-loader, .loader2, .spinner-border) {
    --amin-loader-color: currentColor;
    --amin-loader-faded: color-mix(in srgb, var(--amin-loader-color) 18%, transparent);
    --amin-loader-unit: .55px;
    position: relative;
    display: inline-block;
    width: calc(16 * var(--amin-loader-unit)) !important;
    height: calc(16 * var(--amin-loader-unit)) !important;
    margin-inline: calc(32 * var(--amin-loader-unit));
    border: 0 !important;
    border-radius: 50%;
    background: var(--amin-loader-color) !important;
    box-shadow:
        calc(32 * var(--amin-loader-unit)) 0 var(--amin-loader-color),
        calc(-32 * var(--amin-loader-unit)) 0 var(--amin-loader-color);
    animation: amin-loader-flash .5s ease-out infinite alternate !important;
    vertical-align: middle;
}

:is(.amin-loader, .mainloader, .btn-loader, .loader2, .spinner-border)::before,
:is(.amin-loader, .mainloader, .btn-loader, .loader2, .spinner-border)::after {
    content: none !important;
}

.amin-loader--xs,
#quant-loader .loader2 {
    --amin-loader-unit: .34px;
}

.amin-loader--sm,
.spinner-border-sm {
    --amin-loader-unit: .4px;
}

.amin-loader--md,
.btn-loader {
    --amin-loader-unit: .62px;
}

.amin-loader--lg,
#main-loader .mainloader {
    --amin-loader-unit: 1px;
}

#main-loader .mainloader {
    --amin-loader-color: #fff;
}

#quant-loader .loader2 {
    width: calc(16 * var(--amin-loader-unit)) !important;
    height: calc(16 * var(--amin-loader-unit)) !important;
    margin-inline: calc(32 * var(--amin-loader-unit)) !important;
}

@keyframes amin-loader-flash {
    0% {
        background-color: var(--amin-loader-faded);
        box-shadow:
            calc(32 * var(--amin-loader-unit)) 0 var(--amin-loader-faded),
            calc(-32 * var(--amin-loader-unit)) 0 var(--amin-loader-color);
    }
    50% {
        background-color: var(--amin-loader-color);
        box-shadow:
            calc(32 * var(--amin-loader-unit)) 0 var(--amin-loader-faded),
            calc(-32 * var(--amin-loader-unit)) 0 var(--amin-loader-faded);
    }
    100% {
        background-color: var(--amin-loader-faded);
        box-shadow:
            calc(32 * var(--amin-loader-unit)) 0 var(--amin-loader-color),
            calc(-32 * var(--amin-loader-unit)) 0 var(--amin-loader-faded);
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.amin-loader, .mainloader, .btn-loader, .loader2, .spinner-border) {
        animation: none !important;
        background-color: var(--amin-loader-color) !important;
        box-shadow:
            calc(32 * var(--amin-loader-unit)) 0 var(--amin-loader-faded),
            calc(-32 * var(--amin-loader-unit)) 0 var(--amin-loader-faded);
    }
}