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

/*
    @AUTHOR : Nicolas BOUDOT

    PROPRIÉTÉ : BACKGROUND
    Styles liés à la propriété background (.bgc car .bc est déjà utilisé pour border-color)
*/

/*
    01 - XS
        Background
        Background-color
            Gris
            Thème
        Background-size
        Background-position
            Y
            X
        Background-image
            Spécifs
    02 - SM
    03 - MD
    04 - LG
    05 - XL
    06 - XXL
*/



/* ---------------------
    01 - XS
        Background
--------------------- */



/* ---------------------
    01 - XS
        Background-color
            Gris
--------------------- */

.bgc-gray-100 {
    background-color: var(--gray-100);
}

.bgc-gray-200 {
    background-color: var(--gray-200);
}

.bgc-gray-300 {
    background-color: var(--gray-300);
}

.bgc-gray-400 {
    background-color: var(--gray-400);
}

.bgc-gray-500 {
    background-color: var(--gray-500);
}

.bgc-gray-600 {
    background-color: var(--gray-600);
}

.bgc-gray-700 {
    background-color: var(--gray-700);
}

.bgc-gray-800 {
    background-color: var(--gray-800);
}

.bgc-gray-900 {
    background-color: var(--gray-900);
}



/* ---------------------
    01 - XS
        Background-color
            Thème
--------------------- */

.bgc-transparent {
    background-color: transparent;
}

.bgc-white {
    background-color: var(--white);
}

.bgc-black {
    background-color: var(--black);
}

.bgc-primary {
    background-color: var(--c-primary);
}

    .bgc-primary--5o {
        background-color: rgba(var(--rgb_c-primary) / 5%);
    }

.bgc-secondary {
    background-color: var(--c-secondary);
    color: var(--white);
}

.bgc-tertiary {
    background-color: var(--c-tertiary);
}

.bgc-quaternary {
    background-color: var(--c-quaternary);
}

.bgc-quinary {
    background-color: var(--c-quinary);
}

.bgc-senary {
    background-color: var(--c-senary);
}

.bgc-septenary {
    background-color: var(--c-septenary);
}

.bgc-octonary {
    background-color: var(--c-octonary);
}

.bgc-nonary {
    background-color: var(--c-nonary);
}

.bgc-denary {
    background-color: var(--c-denary);
}



/* ---------------------
    01 - XS
        Background-size
--------------------- */

.bgs-auto {
    background-size: auto;
}

.bgs-contain {
    background-size: contain;
}

.bgs-cover {
    background-size: cover;
}



/* ---------------------
    01 - XS
        Background-position
--------------------- */

.bgp-center {
    background-position: center;
}

.bgp-top {
    background-position: top;
}

.bgp-left {
    background-position: left;
}

.bgp-bottom {
    background-position: bottom;
}

.bgp-right {
    background-position: right;
}



/* ---------------------
    01 - XS
        Background-position
            Y
--------------------- */

.bgp-y-center {
    background-position: center;
}

.bgp-y-top {
    background-position: top;
}

.bgp-y-left {
    background-position: left;
}

.bgp-y-bottom {
    background-position: bottom;
}

.bgp-y-right {
    background-position: right;
}



/* ---------------------
    01 - XS
        Background-position
            X
--------------------- */

.bgp-x-center {
    background-position: center;
}

.bgp-x-top {
    background-position: top;
}

.bgp-x-left {
    background-position: left;
}

.bgp-x-bottom {
    background-position: bottom;
}

.bgp-x-right {
    background-position: right;
}



/* ---------------------
  02 - BACKGROUND-IMAGE
        Spécifs
--------------------- */

/* Pattern généré via http://www.patternify.com/ */
.bgi-pattern {
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50' height='40' patternTransform='scale(.4) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M20 20v20h20V20zm5 5h10v10H25zM0 0v20h20V0zm5 5h10v10H5z' transform='translate(5,0)' stroke-width='1' stroke='none' fill='hsla(0, 0%, 100%, 0)'/><path d='M5 25h10v10H5zM25 5h10v10H25z' transform='translate(5,0)' stroke-width='1' stroke='none' fill='hsla(0, 0%, 0%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(-29,0)' fill='url(%23a)'/></svg>")
}

    /* Filtre appliqué sur une image NOIR UNIQUEMENT */
    .bgi-pattern--red {
        filter: invert(24%) sepia(92%) saturate(3040%) hue-rotate(346deg) brightness(86%) contrast(110%);
    }