/* New Skeleton Loader Design - Overrides for SfSkeleton Component */

.e-skeleton {
    background-color: var(--rival-skeleton-bg) !important;
    border-radius: 6px !important;
    position: relative !important;
    overflow: hidden !important;
}

.e-skeleton::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 150% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    ) !important;
    animation: skeleton-shimmer 1.8s infinite !important;
}

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

/* Remove default Syncfusion skeleton animations/effects */
.e-skeleton-effect-pulse,
.e-skeleton-effect-wave,
.e-skeleton-effect-fade {
    animation: none !important;
}

/* Override Syncfusion's default skeleton background */
.e-skeleton.e-skeleton-text,
.e-skeleton.e-skeleton-circle,
.e-skeleton.e-skeleton-square,
.e-skeleton.e-skeleton-rectangle {
    background: var(--rival-skeleton-bg) !important;
}

/* Predefined skeleton types from specification */
.e-skeleton.skeleton-title {
    height: 20px !important;
    width: 70% !important;
    margin-bottom: 16px !important;
}

.e-skeleton.skeleton-text {
    height: 14px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.e-skeleton.skeleton-text:last-child {
    width: 80% !important;
}

.e-skeleton.skeleton-avatar {
    height: 50px !important;
    width: 50px !important;
    border-radius: 50% !important;
    margin-bottom: 16px !important;
}