/*  UTILITIES: BACKGROUND COLORS
//////////////////////////////////////////////////////////////////////////////*/

.has-background {
}

p.has-background {
    padding: var(--spacing-m);
}

/*  TRANSPARENT //////////////////////////////////////////////////////////////*/

.bg-transparent,
.has-transparent-background-color {
    background-color: transparent;
}

/*  BLACK ////////////////////////////////////////////////////////////////////*/

.bg-black,
.has-black-background-color {
    background-color: var(--color-black);
}

/*  WHITE ////////////////////////////////////////////////////////////////////*/

.bg-white,
.has-white-background-color {
    background-color: var(--color-white);
}

/*  RED //////////////////////////////////////////////////////////////////////*/

.bg-red-50,
.has-red-50-background-color {
    background-color: var(--color-red-50);
}
.bg-red-100,
.has-red-100-background-color {
    background-color: var(--color-red-100);
}
.bg-red-200,
.has-red-200-background-color {
    background-color: var(--color-red-200);
}
.bg-red-300,
.has-red-300-background-color {
    background-color: var(--color-red-300);
}
.bg-red-400,
.has-red-400-background-color {
    background-color: var(--color-red-400);
}
.bg-red,
.bg-red-500,
.has-red-background-color,
.has-red-500-background-color {
    background-color: var(--color-red-500);
}
.bg-red-600,
.has-red-600-background-color {
    background-color: var(--color-red-600);
}
.bg-red-700,
.has-red-700-background-color {
    background-color: var(--color-red-700);
}
.bg-red-800,
.has-red-800-background-color {
    background-color: var(--color-red-800);
}
.bg-red-900,
.has-red-900-background-color {
    background-color: var(--color-red-900);
}
.bg-red-950,
.has-red-950-background-color {
    background-color: var(--color-red-950);
}

/*  GREEN ////////////////////////////////////////////////////////////////////*/

.bg-green-50,
.has-green-50-background-color {
    background-color: var(--color-green-50);
}
.bg-green-100,
.has-green-100-background-color {
    background-color: var(--color-green-100);
}
.bg-green-200,
.has-green-200-background-color {
    background-color: var(--color-green-200);
}
.bg-green-300,
.has-green-300-background-color {
    background-color: var(--color-green-300);
}
.bg-green-400,
.has-green-400-background-color {
    background-color: var(--color-green-400);
}
.bg-green,
.bg-green-500,
.has-green-background-color,
.has-green-500-background-color {
    background-color: var(--color-green-500);
    color: var(--color-black);
}
.bg-green-600,
.has-green-600-background-color {
    background-color: var(--color-green-600);
}
.bg-green-700,
.has-green-700-background-color {
    background-color: var(--color-green-700);
}
.bg-green-800,
.has-green-800-background-color {
    background-color: var(--color-green-800);
}
.bg-green-900,
.has-green-900-background-color {
    background-color: var(--color-green-900);
}
.bg-green-950,
.has-green-950-background-color {
    background-color: var(--color-green-950);
}

/*  NEUTRAL / GREY ///////////////////////////////////////////////////////////*/

.bg-neutral-50,
.bg-grey-50,
.has-neutral-50-background-color,
.has-grey-50-background-color {
    background-color: var(--color-neutral-50);
}
.bg-neutral-100,
.bg-grey-100,
.has-neutral-100-background-color,
.has-grey-100-background-color {
    background-color: var(--color-neutral-100);
}
.bg-neutral-200,
.bg-grey-200,
.has-neutral-200-background-color,
.has-grey-200-background-color {
    background-color: var(--color-neutral-200);
}
.bg-neutral-300,
.bg-grey-300,
.has-neutral-300-background-color,
.has-grey-300-background-color {
    background-color: var(--color-neutral-300);
}
.bg-neutral-400,
.bg-grey-400,
.has-neutral-400-background-color,
.has-grey-400-background-color {
    background-color: var(--color-neutral-400);
}
.bg-neutral,
.bg-neutral-500,
.bg-grey,
.bg-grey-500,
.has-neutral-background-color,
.has-grey-background-color,
.has-neutral-500-background-color,
.has-grey-500-background-color {
    background-color: var(--color-neutral-500);
}
.bg-neutral-600,
.bg-grey-600,
.has-neutral-600-background-color,
.has-grey-600-background-color {
    background-color: var(--color-neutral-600);
}
.bg-neutral-700,
.bg-grey-700,
.has-neutral-700-background-color,
.has-grey-700-background-color {
    background-color: var(--color-neutral-700);
}
.bg-neutral-800,
.bg-grey-800,
.has-neutral-800-background-color,
.has-grey-800-background-color {
    background-color: var(--color-neutral-800);
}
.bg-neutral-900,
.bg-grey-900,
.has-neutral-900-background-color,
.has-grey-900-background-color {
    background-color: var(--color-neutral-900);
}
.bg-neutral-950,
.bg-grey-950,
.has-neutral-950-background-color,
.has-grey-950-background-color {
    background-color: var(--color-neutral-950);
}