/* =========================
   Live Search Skeleton
========================= */

.search-skeleton {
    padding: 10px 0;
    overflow: hidden;
}

.search-skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.search-skeleton-image {
    width: 65px;
    height: 65px;
    border-radius: 8px;
    flex-shrink: 0;

    background: #eeeeee;

    position: relative;
    overflow: hidden;
}

.search-skeleton-content {
    flex: 1;
}

.search-skeleton-title {
    width: 85%;
    height: 14px;
    border-radius: 5px;
    background: #eeeeee;
    margin-bottom: 10px;
}

.search-skeleton-category {
    width: 55%;
    height: 11px;
    border-radius: 5px;
    background: #eeeeee;
    margin-bottom: 10px;
}

.search-skeleton-price {
    width: 35%;
    height: 12px;
    border-radius: 5px;
    background: #eeeeee;
}


/* Shimmer */

.search-skeleton-image::after,
.search-skeleton-title::after,
.search-skeleton-category::after,
.search-skeleton-price::after {

    content: "";

    position: absolute;

    top: 0;
    left: -150%;

    width: 100%;
    height: 100%;

    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.7),
            transparent
    );

    animation: searchSkeletonLoading 1.4s infinite;

}


@keyframes searchSkeletonLoading {

    100% {
        left: 150%;
    }

}