/**
 * File: /shared/css/loading.css
 * Purpose: Shared loading indicators and temporary interaction states.
 *
 * Defines reusable visual feedback while platform content or actions
 * are loading.
 *
 * Loading behavior belongs to application JavaScript. This file only
 * defines the visual presentation of loading states.
 *
 * Dependencies:
 * - /shared/css/tokens.css
 *
 * This file must not contain:
 * - Brand-specific colors or imagery
 * - Application loading logic
 * - Network or API behavior
 * - Page-specific presentation
 */


/* ==========================================
   SKELETON LOADER
   ========================================== */

   .skeleton {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background-color: var(--color-skeleton);
    border-radius: 6px;

    animation: shimmer 1.6s infinite linear;
}


/* ==========================================
   SKELETON ANIMATION
   ========================================== */

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

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


/* ==========================================
   ADD TO CART LOADING STATE
   ========================================== */

/*
 * Prevent repeat interaction while an Add to Cart operation
 * is in progress.
 *
 * JavaScript is responsible only for adding/removing the
 * .loading state. Presentation remains here.
 */
.add-to-cart.loading {
    opacity: 0.7;
    pointer-events: none;
}


/*
 * Preserve the existing loading indicator behavior.
 *
 * A dedicated spinner/loading component could replace this
 * presentation later without changing application logic.
 */
.add-to-cart.loading::after {
    content: "...";
    margin-left: 4px;
}