/*
 |--------------------------------------------------------------------------
 | Skeleton loading system
 |--------------------------------------------------------------------------
 | Shared primitives used by <x-skeleton> and its shape components.
 | Loaded globally so any Livewire component can render a placeholder
 | without pushing extra styles.
 */

@keyframes nx-skeleton-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

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

.nx-skeleton {
    --nx-skeleton-bg: var(--accent-4, #1f2a39);
    --nx-skeleton-shine: rgba(255, 255, 255, 0.06);

    display: block;
    position: relative;
    overflow: hidden;
    flex: none;
    height: 0.75rem;
    border-radius: var(--rounded-sm, 6px);
    background-color: var(--nx-skeleton-bg);
}

.nx-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, transparent, var(--nx-skeleton-shine), transparent);
    transform: translateX(-100%);
    animation: nx-skeleton-shimmer 1.4s ease-in-out infinite;
}

.nx-skeleton--circle {
    border-radius: 9999px;
}

.nx-skeleton--sm {
    border-radius: var(--rounded-sm, 6px);
}

.nx-skeleton--md {
    border-radius: var(--rounded-md, 8px);
}

.nx-skeleton--lg {
    border-radius: var(--rounded-lg, 12px);
}

/* A single skeleton row that mirrors .Activity_item__qCtYX without its
   enter animation (margin-top / opacity), so placeholders do not jump. */
.nx-skeleton-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-md, 16px);
    padding-bottom: var(--spacing-md, 16px);
    border-bottom: 1px solid var(--accent-2, #16202b);
}

.nx-skeleton-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.nx-skeleton-list {
    display: flex;
    flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
    .nx-skeleton::after {
        animation: none;
        opacity: 0.45;
    }
}