// ─── Shared skeleton / shimmer primitives ────────────────────────────────────
// Used by grid-list (poster cards) and unified-collection (channel list rows).

// ─── Grid skeleton (poster cards) ────────────────────────────────────────────

.grid-skeleton-card {
    width: 100%;
}

.grid-skeleton-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(
        in srgb,
        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 84%,
        var(--app-widget-bg, var(--mat-sys-surface-container)) 16%
    );
    border: 1px solid
        color-mix(
            in srgb,
            var(--app-widget-header-border, var(--mat-sys-outline-variant)) 94%,
            transparent
        );
}

.grid-skeleton-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 14px;
    border-radius: 999px;
    background: color-mix(
        in srgb,
        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 56%,
        var(--app-body-color, var(--mat-sys-on-surface-variant)) 44%
    );
}

.grid-skeleton-title {
    margin-top: 10px;
    padding: 0 3px;
    display: grid;
    gap: 6px;
}

.grid-skeleton-line {
    height: 9px;
    border-radius: 999px;
    background: color-mix(
        in srgb,
        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
        var(--app-body-color, var(--mat-sys-on-surface-variant)) 48%
    );

    &--primary {
        width: 92%;
    }

    &--secondary {
        width: 68%;
    }
}

// ─── List skeleton (channel rows) ────────────────────────────────────────────

.list-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid
        color-mix(
            in srgb,
            var(--mat-sys-outline-variant) 40%,
            transparent
        );
}

.list-skeleton-handle {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    background: color-mix(
        in srgb,
        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 60%,
        var(--app-body-color, var(--mat-sys-on-surface-variant)) 40%
    );
}

.list-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    background: color-mix(
        in srgb,
        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 84%,
        var(--app-widget-bg, var(--mat-sys-surface-container)) 16%
    );
}

.list-skeleton-text {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 6px;
}

.list-skeleton-star {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    background: color-mix(
        in srgb,
        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 60%,
        var(--app-body-color, var(--mat-sys-on-surface-variant)) 40%
    );
}

// ─── Shimmer animation (shared) ──────────────────────────────────────────────

.grid-skeleton-thumb,
.grid-skeleton-badge,
.grid-skeleton-line,
.list-skeleton-handle,
.list-skeleton-avatar,
.list-skeleton-star,
.list-skeleton-text .grid-skeleton-line {
    position: relative;
    overflow: hidden;

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            100deg,
            transparent 10%,
            color-mix(
                    in srgb,
                    var(--app-heading-color, var(--mat-sys-on-surface)) 20%,
                    transparent
                )
                46%,
            transparent 76%
        );
        transform: translateX(-120%);
        animation: skeleton-shimmer 1.2s ease-in-out infinite;
    }
}

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