/**
 * Thématique
 */
button.rc-filter.rc-filter-theme[data-filter="musique"] {
    --theme-clr: #CBB4E8;
}

button.rc-filter.rc-filter-theme[data-filter="artculture"] {
    --theme-clr: #F8DAEA;
}

button.rc-filter.rc-filter-theme[data-filter="jeunesse"] {
    --theme-clr: #FEEF88;
}

button.rc-filter.rc-filter-theme[data-filter="societe"] {
    --theme-clr: #C1DCF5;
}

button.rc-filter.rc-filter-theme[data-filter="environnement"] {
    --theme-clr: #BCD3C5;
}

button.rc-filter.rc-filter-theme {
    font-family: 'Poppins';
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: var(--theme-clr);
    border: 1px solid var(--theme-clr);
    border-radius: 0;
    padding: 14px 45px 14px 18px;

    background: linear-gradient(to right, var(--theme-clr));
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0% 100%;
    transition: background-size 300ms, color 500ms;

    &:hover,
    &.active {
        color: #2f2f2f;
        background-position: bottom left;
        background-size: 100% 100%;
    }

    &::after {
        content: '';
        background: url(https://radiogrenouille.com/wp-content/uploads/2026/07/close.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 10px;
        height: auto;
        aspect-ratio: 1;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        filter: invert(1);
        transition: 500ms
    }

    &:hover::after,
    &.active::after {
        filter: invert(0);
    }
}


/**
 * Type
 */
button.rc-filter.rc-filter-type {
    font-family: 'Poppins';
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
    padding: 14px 45px 14px 18px;

    background: linear-gradient(to right, #fff);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0% 100%;
    transition: background-size 300ms, color 500ms;

    &:hover,
    &.active {
        color: #2f2f2f;
        background-position: bottom left;
        background-size: 100% 100%;
    }

    &::after {
        content: '';
        background: url(https://radiogrenouille.com/wp-content/uploads/2026/07/close.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 10px;
        height: auto;
        aspect-ratio: 1;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        filter: invert(1);
        transition: 500ms
    }

    &:hover::after,
    &.active::after {
        filter: invert(0);
    }
}


/**
 * Year
 */
button.rc-filter.rc-filter-year {
    font-family: 'Poppins';
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
    padding: 6px 20px;

    background: linear-gradient(to right, #fff);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0% 100%;
    transition: background-size 300ms, color 500ms;
    margin-right: 10px;

    &:hover,
    &.active {
        color: #2f2f2f;
        background-position: bottom left;
        background-size: 100% 100%;
    }
}