/**
 * SPCB_SHARED_CHECKOUT_SKELETON
 *
 * Visual loading treatment shared by Pro and Lite.
 * Keep this file limited to Woo Blocks loading/skeleton states.
 */

:root {
    --spcb-skeleton-base: color-mix(in srgb, var(--spcb-shell-text, #111827) 5%, #ffffff);
    --spcb-skeleton-shine: color-mix(in srgb, var(--spcb-shell-primary, #c7121d) 7%, #ffffff);
    --spcb-skeleton-border: color-mix(in srgb, var(--spcb-shell-border, #d7d7d7) 76%, #ffffff);
}

body.woocommerce-checkout:not(.spcb-lite-checkout) :where(
    .wc-block-components-skeleton,
    .wc-block-components-skeleton--checkout-shipping,
    .wc-block-components-skeleton--checkout-payment
),
body.spcb-lite-styles-enabled :where(
    .wc-block-components-skeleton,
    .wc-block-components-skeleton--checkout-shipping,
    .wc-block-components-skeleton--checkout-payment
) {
    border-color: var(--spcb-skeleton-border);
    border-radius: var(--spcb-shell-radius, 8px);
}

body.woocommerce-checkout:not(.spcb-lite-checkout) .wc-block-components-skeleton__element,
body.spcb-lite-styles-enabled .wc-block-components-skeleton__element {
    background: var(--spcb-skeleton-base);
    border-radius: 7px;
}

body.woocommerce-checkout:not(.spcb-lite-checkout) .wc-block-components-skeleton__element::after,
body.spcb-lite-styles-enabled .wc-block-components-skeleton__element::after {
    background: linear-gradient(90deg, transparent, var(--spcb-skeleton-shine) 48%, transparent);
}

body.woocommerce-checkout:not(.spcb-lite-checkout) :where(
    .wp-block-woocommerce-checkout.is-loading,
    .wc-block-checkout.is-loading
),
body.spcb-lite-styles-enabled :where(
    .wp-block-woocommerce-checkout.is-loading,
    .wc-block-checkout.is-loading
) {
    opacity: 1;
}

body.woocommerce-checkout:not(.spcb-lite-checkout) :where(
    .wp-block-woocommerce-checkout.is-loading .wc-block-components-checkout-step,
    .wp-block-woocommerce-checkout.is-loading .wc-block-components-sidebar,
    .wc-block-checkout.is-loading .wc-block-components-checkout-step,
    .wc-block-checkout.is-loading .wc-block-components-sidebar
),
body.spcb-lite-styles-enabled :where(
    .wp-block-woocommerce-checkout.is-loading .wc-block-components-checkout-step,
    .wp-block-woocommerce-checkout.is-loading .wc-block-components-sidebar,
    .wc-block-checkout.is-loading .wc-block-components-checkout-step,
    .wc-block-checkout.is-loading .wc-block-components-sidebar
) {
    background: var(--spcb-shell-card, #ffffff);
    border-color: var(--spcb-shell-border, #d7d7d7);
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-checkout:not(.spcb-lite-checkout) .wc-block-components-skeleton__element::after,
    body.spcb-lite-styles-enabled .wc-block-components-skeleton__element::after {
        animation: none !important;
    }
}