
.filter-group{
    @extend %reset-ul;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    li{
        padding: 0 5px;
       
        span,a{
            display: inline-block;
            padding: 0 5px 5px;
            cursor: pointer;
        }
        span{
            position: relative;
            overflow: hidden;
            &.active{
                color: $color_primary;
                &:after{
                    @include animation(scale-in-hor-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both);
                    background-color: $color_primary;
                }
            }
            &:after{
                position: absolute;
                content: '';
                display: block;
                width: 100%;
                height: 2px;
                left: 0;
                bottom: 0;
                @include animation(scale-out-hor-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both);
            }
            &:hover{
                color: $color_hover;
                &:after{
                    background-color: $color_hover;
                    @include animation(scale-in-hor-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both);
                }
            }
        }
        a{
            @include border-bottom(2px,solid);
            @extend %primary-border;
            &:hover{
                border-color: $color_hover;
            }
        }
    }
}