/***************************************************************************
* Filter Buttons
****************************************************************************/


/***************************************************************************
* Items
****************************************************************************/
[class*="fi_"] {
    display: none;
}
[class*="fi_"].active {
    display: block;
}


.wrapper .button[class*="filter_"]{
    background-color: transparent;
    color: var(--typo-color-black);
}
.wrapper .button[class*="filter_"]:before {
    content: ''; position: absolute;
    top: 0; left: 0; bottom: 0; right: 0; 
    pointer-events: none; width: auto; height: auto;
    border: 0.125em solid currentColor;
    border-radius: 0.25em;
}
.wrapper .button[class*="filter_"].active{
    background-color: var(--typo-color-black);
    color: #FFFFFF;
}