/*
    ==========================================================
    PROJECT : DEVENIR-ARTISAN.NET
    FILE    : sidebar-widget-categories.css
    AUTH    : Renaud
    CREATED : 22 décembre 2025
    UPDATED : 23 décembre 2025
    ==========================================================
*/

/**
*   @project        DEVENIR-ARTISAN.NET
*   @description    Styles spécifiques au widget des catégories du blog.
*                   Gère la mise en forme de la liste et les séparateurs.
*   
*   @file           css/sidebar-widget-categories.css
*/

/* --- BLOCK : Sidebar Widget (Cadre) --- */
/* Gère uniquement la liste des catégories */
/* --- COMPOSANT : Liste de Catégories --- */
.sidebar-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-categories__item {
    border-bottom: 1px dashed var(--color-separator);
}

.sidebar-categories__item:last-child {
    border-bottom: none;
}

/* On stylise l'interaction avec le composant buttons-nav.css */
.sidebar-categories__item .buttons-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0.5rem;
    width: 100%;
    transition: all 0.2s ease;
}

/* Petit effet de décalage et changement de fond au survol de l'item */
.sidebar-categories__item:hover .buttons-nav {
    transform: translateX(8px);
    background-color: transparent; /* On annule le fond gris par défaut du buttons-nav */
    color: var(--color-link-hover);
}

/* Optionnel : ajout d'une petite flèche ou puce au survol */
.sidebar-categories__item:hover .buttons-nav::after {
    content: '→';
    font-weight: bold;
    opacity: 0.5;
}