/*
 * <currency-chip> styling for IndianShopping
 *
 * The custom element is defined in SHARED_DASHBOARD/common.js.
 * Internal markup:
 *   <currency-chip data-usd="14.99" data-compare-at="19.99">
 *     <span class="currency-chip__amount">$14.99</span>
 *     <span class="currency-chip__compare">$19.99</span>
 *   </currency-chip>
 *
 * Inherit the host text color by default — keeps the chip composable inside
 * hero gradients, dark cards, and white panels. Use Tailwind utility classes
 * on the <currency-chip> tag itself (e.g. `class="text-xl font-bold text-primary-500 dark:text-primary-400"`).
 */

currency-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.currency-chip__amount {
    /* inherits color + size from parent — composable */
}

.currency-chip__compare {
    font-size: 0.85em;
    text-decoration: line-through;
    opacity: 0.6;
    font-weight: normal;
}

/* Subtle fade on the async swap from USD-sync to user-currency render */
currency-chip .currency-chip__amount,
currency-chip .currency-chip__compare {
    transition: opacity 0.2s ease-out;
}