/* =============================================================================
   MyCategoryCard et MyThemeCard
   -----------------------------------------------------------------------------
   Deux composants presque identiques, dont les regles suivent le meme motif.
   Couleurs et rayons passent par les tokens ; le reste est repris a l'identique.
   ============================================================================= */

.my-cat-card__name,
.my-theme-card__name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-category-card--editing,
.my-theme-card--editing {
    box-shadow: 0 0 0 2px var(--my-action-primary);
    border-radius: var(--my-radius-md);
}

@keyframes myCatalogCardFlash {
    0% { outline: 0 solid rgba(var(--my-brand-primary-rgb), 0); outline-offset: 0; }
    30% { outline: 5px solid rgba(var(--my-brand-primary-rgb), 0.65); outline-offset: 3px; }
    60% { outline: 0 solid rgba(var(--my-brand-primary-rgb), 0); outline-offset: 0; }
    85% { outline: 4px solid rgba(var(--my-brand-primary-rgb), 0.45); outline-offset: 2px; }
    100% { outline: 0 solid rgba(var(--my-brand-primary-rgb), 0); outline-offset: 0; }
}

.my-category-card--flash,
.my-theme-card--flash {
    animation: myCatalogCardFlash 0.7s ease-in-out;
}