/* -------------
    SOMMAIRE
------------- */

/*
    @AUTHOR : Nicolas BOUDOT

    PROPRIÉTÉ : FILTER
    Styles liés aux filtres
*/

/*
    01 - XS
            Filter
                Blur
                Brightness
                Contrast
                Drop Shadow
                Grayscale
                Hue Rotate
                Invert
                Opacity
                Saturate
                Sepia
                Spécifique
            Mix Blend Mode
    02 - SM
    03 - MD
    04 - LG
    05 - XL
    06 - XXL
*/



/* ---------------------
    01 - XS
        Filter
            Defaut
--------------------- */

.f-none {
    filter: none;
}



/* ---------------------
    01 - XS
        Filter
            Blur
--------------------- */

.f-blur-1px {
    filter: blur(1px);
}

.f-blur-2px {
    filter: blur(2px);
}

.f-blur-3px {
    filter: blur(3px);
}

.f-blur-4px {
    filter: blur(4px);
}

.f-blur-5px {
    filter: blur(5px);
}



/* ---------------------
    01 - XS
        Filter
            Brightness
--------------------- */

.f-brightness-0 {
    filter: brightness(0%);
}

.f-brightness-25 {
    filter: brightness(25%);
}

.f-brightness-50 {
    filter: brightness(50%);
}

.f-brightness-75 {
    filter: brightness(75%);
}

.f-brightness-100 {
    filter: brightness(100%);
}



/* ---------------------
    01 - XS
        Filter
            Contrast
--------------------- */

.f-contrast-0 {
    filter: contrast(0%);
}

.f-contrast-25 {
    filter: contrast(25%);
}

.f-contrast-50 {
    filter: contrast(50%);
}

.f-contrast-75 {
    filter: contrast(75%);
}

.f-contrast-100 {
    filter: contrast(100%);
}



/* ---------------------
    01 - XS
        Filter
            Drop Shadow
--------------------- */

.f-drop-shadow-1px-1px-1px-black {
    filter: drop-shadow(1px 1px 1px var(--black));
}



/* ---------------------
    01 - XS
        Filter
            Grayscale
--------------------- */

.f-grayscale-0 {
    filter: grayscale(0%);
}

.f-grayscale-25 {
    filter: grayscale(25%);
}

.f-grayscale-50 {
    filter: grayscale(50%);
}

.f-grayscale-75 {
    filter: grayscale(75%);
}

.f-grayscale-100 {
    filter: grayscale(100%);
}



/* ---------------------
    01 - XS
        Filter
            Hue Rotate
--------------------- */

.f-hue-rotate-0deg {
    filter: hue-rotate(0deg);
}

.f-hue-rotate-45deg {
    filter: hue-rotate(45deg);
}

.f-hue-rotate-90deg {
    filter: hue-rotate(90deg);
}

.f-hue-rotate-135deg {
    filter: hue-rotate(135deg);
}

.f-hue-rotate-180deg {
    filter: hue-rotate(180deg);
}

.f-hue-rotate-225deg {
    filter: hue-rotate(225deg);
}

.f-hue-rotate-270deg {
    filter: hue-rotate(270deg);
}

.f-hue-rotate-315deg {
    filter: hue-rotate(315deg);
}

.f-hue-rotate-360deg {
    filter: hue-rotate(360deg);
}



/* ---------------------
    01 - XS
        Filter
            Invert
--------------------- */

.f-invert-0 {
    filter: invert(0%);
}

.f-invert-25 {
    filter: invert(25%);
}

.f-invert-50 {
    filter: invert(50%);
}

.f-invert-75 {
    filter: invert(75%);
}

.f-invert-100 {
    filter: invert(100%);
}



/* ---------------------
    01 - XS
        Filter
            Opacity
--------------------- */

.f-opacity-0 {
    filter: opacity(0%);
}

.f-opacity-25 {
    filter: opacity(25%);
}

.f-opacity-50 {
    filter: opacity(50%);
}

.f-opacity-75 {
    filter: opacity(75%);
}

.f-opacity-100 {
    filter: opacity(100%);
}



/* ---------------------
    01 - XS
        Filter
            Saturate
--------------------- */

.f-saturate-0 {
    filter: saturate(0%);
}

.f-saturate-25 {
    filter: saturate(25%);
}

.f-saturate-50 {
    filter: saturate(50%);
}

.f-saturate-75 {
    filter: saturate(75%);
}

.f-saturate-100 {
    filter: saturate(100%);
}



/* ---------------------
    01 - XS
        Filter
            Sepia
--------------------- */

.f-sepia-0 {
    filter: sepia(0%);
}

.f-sepia-25 {
    filter: sepia(25%);
}

.f-sepia-50 {
    filter: sepia(50%);
}

.f-sepia-75 {
    filter: sepia(75%);
}

.f-sepia-100 {
    filter: sepia(100%);
}



/* ---------------------
    01 - XS
        Filter
            Spécifique
--------------------- */

/*
  Infos :
    On peut appliquer un filtre sur des images NOIR UNIQUEMENT afin de changer leur couleur.
    Pratique pour gérer des icons gérés depuis le BO.
    Outil : https://webvista.co.in/tools/css_filter/
*/

/*
  Exemple :

    .filter-white {
        filter: invert(100%) brightness(100%) contrast(100%);
    }

    .filter-color-primary {
        filter: invert(24%) sepia(92%) saturate(3040%) hue-rotate(346deg) brightness(86%) contrast(110%);
    }
*/



/* ---------------------
    01 - XS
        Mix Blend Mode
--------------------- */

.mbm-color {
    mix-blend-mode: color;
}

.mbm-color-burn {
    mix-blend-mode: color-burn;
}

.mbm-color-dodge {
    mix-blend-mode: color-dodge;
}

.mbm-darken {
    mix-blend-mode: darken;
}

.mbm-difference {
    mix-blend-mode: difference;
}

.mbm-exclusion {
    mix-blend-mode: exclusion;
}

.mbm-hard-light {
    mix-blend-mode: hard-light;
}

.mbm-hue {
    mix-blend-mode: hue;
}

.mbm-lighten {
    mix-blend-mode: lighten;
}

.mbm-luminosity {
    mix-blend-mode: luminosity;
}

.mbm-multiply {
    mix-blend-mode: multiply;
}

.mbm-normal {
    mix-blend-mode: normal;
}

.mbm-overlay {
    mix-blend-mode: overlay;
}

.mbm-plus-lighter {
    mix-blend-mode: plus-lighter;
}

.mbm-saturation {
    mix-blend-mode: saturation;
}

.mbm-screen {
    mix-blend-mode: screen;
}

.mbm-soft-light {
    mix-blend-mode: soft-light;
}