.icon-style {
    display: inline-flex;
    position: relative;
    align-items: center;
}

.icon-style:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Icon color variants */
.icon-style.white:before {
    background: var(--filtre-icon-white);
}

.icon-style.black:before {
    background: var(--filtre-icon-black);
}

.icon-style.red:before {
    background: var(--filtre-red);
}

.icon-style.icon-cart:before {
    -webkit-mask-image: url(../images/icons/icon_cart.svg);
    mask-image: url(../images/icons/icon_cart.svg);
    width: 1.75rem;
    height: 1.75rem;
}

.icon-style.icon-user:before {
    -webkit-mask-image: url(../images/icons/icon_user.svg);
    mask-image: url(../images/icons/icon_user.svg);
    width: 1.4375rem;
    height: 1.625rem;
}

.icon-style.icon-search:before {
    -webkit-mask-image: url(../images/icons/icon_search.svg);
    mask-image: url(../images/icons/icon_search.svg);
    width: 1rem;
    height: 1rem;
}

.icon-style.icon-fb:before {
    -webkit-mask-image: url(../images/icons/icon_fb.svg);
    mask-image: url(../images/icons/icon_fb.svg);
    width: 1rem;
    height: 1rem;
}

.icon-style.icon-menu:before {
    -webkit-mask-image: url(../images/icons/icon_menu.svg);
    mask-image: url(../images/icons/icon_menu.svg);
    width: 1.1875rem;
    height: 0.875rem;
}

.icon-style.icon-home:before {
    -webkit-mask-image: url(../images/icons/icon_home.svg);
    mask-image: url(../images/icons/icon_home.svg);
    width: 1.5rem;
    height: 1.5rem;
}

.icon-style.icon-arrow-right:before {
    -webkit-mask-image: url(../images/icons/icon_arrow_right.svg);
    mask-image: url(../images/icons/icon_arrow_right.svg);
    width: 1.125rem;
    height: 1.125rem;
}

.icon-style.icon-arrow-left:before {
    -webkit-mask-image: url(../images/icons/icon_arrow_right.svg);
    mask-image: url(../images/icons/icon_arrow_right.svg);
    width: 1.125rem;
    height: 1.125rem;;
}

.icon-style.icon-tear:before {
    -webkit-mask-image: url(../images/icons/icon_tear.svg);
    mask-image: url(../images/icons/icon_tear.svg);
    width: 1rem;
    height: 1.2875rem;
}

.nav-link.active .icon-style.icon-tear:before {
    width: 1.0625rem;
    height: 1.6875rem;
}

.icon-style.icon-aerosol:before {
    -webkit-mask-image: url(../images/icons/icon_aerosol.svg);
    mask-image: url(../images/icons/icon_aerosol.svg);
    width: 1rem;
    height: 1rem;
}

.nav-link.active .icon-style.icon-aerosol:before {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-style.icon-battery:before {
    -webkit-mask-image: url(../images/icons/icon_battery.svg);
    mask-image: url(../images/icons/icon_battery.svg);
    width: 1rem;
    height: 1rem;
}

.nav-link.active .icon-style.icon-battery:before {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-style.icon-car-lights:before {
    -webkit-mask-image: url(../images/icons/icon_car-lights.svg);
    mask-image: url(../images/icons/icon_car-lights.svg);
    width: 1rem;
    height: 1rem;
}

.icon-style.icon-car-oil:before {
    -webkit-mask-image: url(../images/icons/icon_car-oil.svg);
    mask-image: url(../images/icons/icon_car-oil.svg);
    width: 1rem;
    height: 1rem;
}

.icon-style.icon-car-painting:before {
    -webkit-mask-image: url(../images/icons/icon_car-painting.svg);
    mask-image: url(../images/icons/icon_car-painting.svg);
    width: 1rem;
    height: 1rem;
}

.icon-style.icon-car-repair:before {
    -webkit-mask-image: url(../images/icons/icon_car-repair.svg);
    mask-image: url(../images/icons/icon_car-repair.svg);
    width: 1rem;
    height: 1rem;
}

.icon-style.icon-gearshift:before {
    -webkit-mask-image: url(../images/icons/icon_gearshift.svg);
    mask-image: url(../images/icons/icon_gearshift.svg);
    width: 1rem;
    height: 1rem;
}

.icon-style.icon-motor:before {
    -webkit-mask-image: url(../images/icons/icon_motor.svg);
    mask-image: url(../images/icons/icon_motor.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.icon-style.icon-oil:before {
    -webkit-mask-image: url(../images/icons/icon_oil.svg);
    mask-image: url(../images/icons/icon_oil.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.icon-style.icon-pulley:before {
    -webkit-mask-image: url(../images/icons/icon_pulley.svg);
    mask-image: url(../images/icons/icon_pulley.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.icon-style.icon-rohoz:before {
    -webkit-mask-image: url(../images/icons/icon_rohoz.svg);
    mask-image: url(../images/icons/icon_rohoz.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.icon-style.icon-snowflake:before {
    -webkit-mask-image: url(../images/icons/icon_snowflake.svg);
    mask-image: url(../images/icons/icon_snowflake.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.icon-style.icon-toolbox:before {
    -webkit-mask-image: url(../images/icons/icon_toolbox.svg);
    mask-image: url(../images/icons/icon_toolbox.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.icon-style.icon-windshield:before {
    -webkit-mask-image: url(../images/icons/icon_windshield.svg);
    mask-image: url(../images/icons/icon_windshield.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.nav-link.active .icon-style.icon-windshield:before {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-style.icon-share:before {
    -webkit-mask-image: url(../images/icons/icon_share.svg);
    mask-image: url(../images/icons/icon_share.svg);
    width: 1.25rem;
    height: 1.25rem;
}
.icon-style.icon-question:before {
    -webkit-mask-image: url(../images/icons/icon_question.svg);
    mask-image: url(../images/icons/icon_question.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.icon-style.icon-availability:before {
    -webkit-mask-image: url(../images/icons/icon-availability.svg);
    mask-image: url(../images/icons/icon-availability.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.icon-style.icon-brakes:before {
    -webkit-mask-image: url(../images/icons/icon-brakes.svg);
    mask-image: url(../images/icons/icon-brakes.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.nav-link.active .icon-style.icon-brakes:before {
    width: 1.5rem;
    height: 1.5rem;
}


.icon-style.icon-mat:before {
    -webkit-mask-image: url(../images/icons/icon-mat.svg);
    mask-image: url(../images/icons/icon-mat.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.nav-link.active .icon-style.icon-mat:before {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-style.icon-wrench:before {
    -webkit-mask-image: url(../images/icons/icon-wrench.svg);
    mask-image: url(../images/icons/icon-wrench.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.nav-link.active .icon-style.icon-wrench:before {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-style.icon-spark:before {
    -webkit-mask-image: url(../images/icons/icon-spark.svg);
    mask-image: url(../images/icons/icon-spark.svg);
    width: 1.25rem;
    height: 1.25rem;
}

.nav-link.active .icon-style.icon-spark:before {
    width: 1.5rem;
    height: 1.5rem;
}
.icon-style.icon-loading:before {
    -webkit-mask-image: url(../images/icons/icon_loading.svg);
    mask-image: url(../images/icons/icon_loading.svg);
    width: 1.25rem;
    height: 1.25rem;
}
.icon-style.icon-check:before {
    -webkit-mask-image: url(../images/icons/icon_check.svg);
    mask-image: url(../images/icons/icon_check.svg);
    width: 1.25rem;
    height: 1.25rem;
}
.icon-style.icon-review:before {
    -webkit-mask-image: url(../images/icons/icon-review.svg);
    mask-image: url(../images/icons/icon-review.svg);
    width: 1.25rem;
    height: 1.25rem;
}
.icon-style.icon-bell:before {
    -webkit-mask-image: url(../images/icons/icon-bell.svg);
    mask-image: url(../images/icons/icon-bell.svg);
    width: 1.25rem;
    height: 1.25rem;
}
.rotate-icon {
    animation: rotation 2s infinite linear;
}