/* ========== Inline loading base ========== */
.inline-loading {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

    .inline-loading .loading-text {
        font-size: .875rem;
    }

    /* sử dụng màu theo Bootstrap (spinner-border dùng currentColor) */
    .inline-loading.text-primary {
        color: var(--bs-primary);
    }

    .inline-loading.text-secondary {
        color: var(--bs-secondary);
    }

    .inline-loading.text-success {
        color: var(--bs-success);
    }

    .inline-loading.text-warning {
        color: var(--bs-warning);
    }

    .inline-loading.text-danger {
        color: var(--bs-danger);
    }

    .inline-loading.text-info {
        color: var(--bs-info);
    }

    .inline-loading.text-muted {
        color: var(--bs-secondary-color, #6c757d);
    }

    /* sizes */
    .inline-loading.size-sm .spinner-border,
    .inline-loading.size-sm .spinner-grow,
    .inline-loading.size-sm .ring,
    .inline-loading.size-sm .bars,
    .inline-loading.size-sm .dots {
        transform: scale(.85);
    }

    .inline-loading.size-lg .spinner-border,
    .inline-loading.size-lg .spinner-grow,
    .inline-loading.size-lg .ring,
    .inline-loading.size-lg .bars,
    .inline-loading.size-lg .dots {
        transform: scale(1.2);
    }

.inline-loading-slot {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

/* ========== Extra loaders ========== */
/* Ring loader (viền quay) */
.ring {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: .15rem solid currentColor;
    border-right-color: transparent;
    animation: il-spin .75s linear infinite;
}

/* Bars loader (3 thanh) */
.bars {
    display: inline-flex;
    gap: .2rem;
    align-items: flex-end;
    height: 1rem;
}

    .bars i {
        display: block;
        width: .2rem;
        height: .4rem;
        background: currentColor;
        border-radius: .2rem;
        animation: il-bars 1s ease-in-out infinite;
    }

        .bars i:nth-child(2) {
            animation-delay: .15s;
        }

        .bars i:nth-child(3) {
            animation-delay: .3s;
        }

/* Dots loader (3 chấm) */
.dots {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
}

    .dots i {
        width: .3rem;
        height: .3rem;
        background: currentColor;
        border-radius: 50%;
        display: block;
        animation: il-dots 1s ease-in-out infinite;
    }

        .dots i:nth-child(2) {
            animation-delay: .15s;
        }

        .dots i:nth-child(3) {
            animation-delay: .3s;
        }

/* Iconify spin */
.il-spin {
    animation: il-spin .9s linear infinite;
}

@keyframes il-bars {
    0%, 100% {
        height: .4rem;
        opacity: .6;
    }

    50% {
        height: 1rem;
        opacity: 1;
    }
}

@keyframes il-dots {
    0%, 100% {
        transform: translateY(0);
        opacity: .6;
    }

    50% {
        transform: translateY(-.2rem);
        opacity: 1;
    }
}

@keyframes il-spin {
    to {
        transform: rotate(360deg);
    }
}