/* Filter Button */ .filter-btn { transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1); } .filter-btn[data-filter-status="active"] { background-color: #131313; color: #EFEEEC; } /* Reset Button */ .reset-btn { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); opacity: 0; visibility: hidden; } .reset-btn[data-filter-status="active"] { opacity: 1; visibility: visible; } /* Filter List Item */ .filter-list__item[data-filter-status="active"] { transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); transform: scale(1) rotate(0.001deg); opacity: 1; visibility: visible; position: relative; } .filter-list__item[data-filter-status="transition-out"] { transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1); transform: scale(0.9) rotate(0.001deg); opacity: 0; visibility: visible; } .filter-list__item[data-filter-status="not-active"] { transform: scale(0.9) rotate(0.001deg); opacity: 0; visibility: hidden; position: absolute; }