Background Colors

/*

Okay, this is a big one. This file is a collection of all the 
background colors that are used in the design system.

Each utility class is named according to the following pattern: bg-{light|dark}__{color}.

The color names are based on variables from the globals.css file. 
Variables are set on the :root element, so they're accessible everywhere.

Each light color variable has a corresponding dark color variable, and vice versa.

Therefore, you should only design for one system or the other. 

The global color-swapping function will automatically swap the color scheme 
based on the user's device preference.

Background Color utility classes also set the optimal text color for child elements,
if there are any.

*/


.bg-light__primary {
  background-color: var(--light__primary_lkv);
  color: var(--light__onprimary_lkv);
}

.bg-light__onprimary {
  background-color: var(--light__onprimary_lkv);
  color: var(--light__primary_lkv);
}

.bg-light__primarycontainer {
  background-color: var(--light__primarycontainer_lkv);
  color: var(--light__onprimarycontainer_lkv);
}

.bg-light__onprimarycontainer {
  background-color: var(--light__onprimarycontainer_lkv);
  color: var(--light__primarycontainer_lkv);
}

.bg-light__secondary {
  background-color: var(--light__secondary_lkv);
  color: var(--light__onsecondary_lkv);
}

.bg-light__onsecondary {
  background-color: var(--light__onsecondary_lkv);
  color: var(--light__secondary_lkv);
}

.bg-light__secondarycontainer {
  background-color: var(--light__secondarycontainer_lkv);
  color: var(--light__onsecondarycontainer_lkv);
}

.bg-light__onsecondarycontainer {
  background-color: var(--light__onsecondarycontainer_lkv);
  color: var(--light__secondarycontainer_lkv);
}

.bg-light__tertiary {
  background-color: var(--light__tertiary_lkv);
  color: var(--light__ontertiary_lkv);
}

.bg-light__ontertiary {
  background-color: var(--light__ontertiary_lkv);
  color: var(--light__tertiary_lkv);
}

.bg-light__tertiarycontainer {
  background-color: var(--light__tertiarycontainer_lkv);
  color: var(--light__ontertiarycontainer_lkv);
}

.bg-light__ontertiarycontainer {
  background-color: var(--light__ontertiarycontainer_lkv);
  color: var(--light__tertiarycontainer_lkv);
}

.bg-light__error {
  background-color: var(--light__error_lkv);
  color: var(--light__onerror_lkv);
}

.bg-light__onerror {
  background-color: var(--light__onerror_lkv);
  color: var(--light__error_lkv);
}

.bg-light__errorcontainer {
  background-color: var(--light__errorcontainer_lkv);
  color: var(--light__onerrorcontainer_lkv);
}

.bg-light__onerrorcontainer {
  background-color: var(--light__onerrorcontainer_lkv);
  color: var(--light__errorcontainer_lkv);
}

.bg-light__background {
  background-color: var(--light__background_lkv);
  color: var(--light__onbackground_lkv);
}

.bg-light__onbackground {
  background-color: var(--light__onbackground_lkv);
  color: var(--light__background_lkv);
}

.bg-light__surface {
  background-color: var(--light__surface_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__onsurface {
  background-color: var(--light__onsurface_lkv);
  color: var(--light__surface_lkv);
}

.bg-light__surfacevariant {
  background-color: var(--light__surfacevariant_lkv);
  color: var(--light__onsurfacevariant_lkv);
}

.bg-light__onsurfacevariant {
  background-color: var(--light__onsurfacevariant_lkv);
  color: var(--light__surfacevariant_lkv);
}

.bg-light__outline {
  background-color: var(--light__outline_lkv);
  color: var(--light__surface_lkv);
}

.bg-light__outlinevariant {
  background-color: var(--light__outlinevariant_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__shadow {
  background-color: var(--light__shadow_lkv);
  color: var(--light__surface_lkv);
}

.bg-light__scrim {
  background-color: var(--light__scrim_lkv);
  color: var(--light__surface_lkv);
}

.bg-light__inversesurface {
  background-color: var(--light__inversesurface_lkv);
  color: var(--light__inverseonsurface_lkv);
}

.bg-light__inverseonsurface {
  background-color: var(--light__inverseonsurface_lkv);
  color: var(--light__inversesurface_lkv);
}

.bg-light__inverseprimary {
  background-color: var(--light__inverseprimary_lkv);
  color: var(--light__onprimarycontainer_lkv);
}

.bg-light__success {
  background-color: var(--light__success_lkv);
  color: var(--light__onsuccess_lkv);
}

.bg-light__successcontainer {
  background-color: var(--light__successcontainer_lkv);
  color: var(--light__onsuccesscontainer_lkv);
}

.bg-light__onsuccess {
  background-color: var(--light__onsuccess_lkv);
  color: var(--light__success_lkv);
}

.bg-light__onsuccesscontainer {
  background-color: var(--light__onsuccesscontainer_lkv);
  color: var(--light__successcontainer_lkv);
}

.bg-light__warning {
  background-color: var(--light__warning_lkv);
  color: var(--light__onwarning_lkv);
}

.bg-light__warningcontainer {
  background-color: var(--light__warningcontainer_lkv);
  color: var(--light__onwarningcontainer_lkv);
}

.bg-light__onwarning {
  background-color: var(--light__onwarning_lkv);
  color: var(--light__warning_lkv);
}

.bg-light__onwarningcontainer {
  background-color: var(--light__onwarningcontainer_lkv);
  color: var(--light__warningcontainer_lkv);
}

.bg-light__info {
  background-color: var(--light__info_lkv);
  color: var(--light__oninfo_lkv);
}

.bg-light__infocontainer {
  background-color: var(--light__infocontainer_lkv);
  color: var(--light__oninfocontainer_lkv);
}

.bg-light__oninfo {
  background-color: var(--light__oninfo_lkv);
  color: var(--light__info_lkv);
}

.bg-light__oninfocontainer {
  background-color: var(--light__oninfocontainer_lkv);
  color: var(--light__infocontainer_lkv);
}

.bg-light__primaryfixed {
  background-color: var(--light__primaryfixed_lkv);
  color: var(--light__onprimaryfixed_lkv);
}

.bg-light__primaryfixeddim {
  background-color: var(--light__primaryfixeddim_lkv);
  color: var(--light__onprimaryfixedvariant_lkv);
}

.bg-light__onprimaryfixed {
  background-color: var(--light__onprimaryfixed_lkv);
  color: var(--light__primaryfixed_lkv);
}

.bg-light__onprimaryfixedvariant {
  background-color: var(--light__onprimaryfixedvariant_lkv);
  color: var(--light__primaryfixed_lkv);
}

.bg-light__secondaryfixed {
  background-color: var(--light__secondaryfixed_lkv);
  color: var(--light__onsecondaryfixed_lkv);
}

.bg-light__secondaryfixeddim {
  background-color: var(--light__secondaryfixeddim_lkv);
  color: var(--light__onsecondaryfixedvariant_lkv);
}

.bg-light__onsecondaryfixed {
  background-color: var(--light__onsecondaryfixed_lkv);
  color: var(--light__secondaryfixed_lkv);
}

.bg-light__onsecondaryfixedvariant {
  background-color: var(--light__onsecondaryfixedvariant_lkv);
  color: var(--light__secondaryfixed_lkv);
}

.bg-light__tertiaryfixed {
  background-color: var(--light__tertiaryfixed_lkv);
  color: var(--light__ontertiaryfixed_lkv);
}

.bg-light__tertiaryfixeddim {
  background-color: var(--light__tertiaryfixeddim_lkv);
  color: var(--light__ontertiaryfixedvariant_lkv);
}

.bg-light__ontertiaryfixed {
  background-color: var(--light__ontertiaryfixed_lkv);
  color: var(--light__tertiaryfixed_lkv);
}

.bg-light__ontertiaryfixedvariant {
  background-color: var(--light__ontertiaryfixedvariant_lkv);
  color: var(--light__tertiaryfixed_lkv);
}

.bg-light__surfacedim {
  background-color: var(--light__surfacedim_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacebright {
  background-color: var(--light__surfacebright_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacecontainerlowest {
  background-color: var(--light__surfacecontainerlowest_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacecontainerlow {
  background-color: var(--light__surfacecontainerlow_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacecontainer {
  background-color: var(--light__surfacecontainer_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacecontainerhigh {
  background-color: var(--light__surfacecontainerhigh_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacecontainerhighest {
  background-color: var(--light__surfacecontainerhighest_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-dark__primary {
  background-color: var(--dark__primary_lkv);
  color: var(--dark__onprimary_lkv);
}

.bg-dark__onprimary {
  background-color: var(--dark__onprimary_lkv);
  color: var(--dark__primary_lkv);
}

.bg-dark__primarycontainer {
  background-color: var(--dark__primarycontainer_lkv);
  color: var(--dark__onprimarycontainer_lkv);
}

.bg-dark__onprimarycontainer {
  background-color: var(--dark__onprimarycontainer_lkv);
  color: var(--dark__primarycontainer_lkv);
}

.bg-dark__secondary {
  background-color: var(--dark__secondary_lkv);
  color: var(--dark__onsecondary_lkv);
}

.bg-dark__onsecondary {
  background-color: var(--dark__onsecondary_lkv);
  color: var(--dark__secondary_lkv);
}

.bg-dark__secondarycontainer {
  background-color: var(--dark__secondarycontainer_lkv);
  color: var(--dark__onsecondarycontainer_lkv);
}

.bg-dark__onsecondarycontainer {
  background-color: var(--dark__onsecondarycontainer_lkv);
  color: var(--dark__secondarycontainer_lkv);
}

.bg-dark__tertiary {
  background-color: var(--dark__tertiary_lkv);
  color: var(--dark__ontertiary_lkv);
}

.bg-dark__ontertiary {
  background-color: var(--dark__ontertiary_lkv);
  color: var(--dark__tertiary_lkv);
}

.bg-dark__tertiarycontainer {
  background-color: var(--dark__tertiarycontainer_lkv);
  color: var(--dark__ontertiarycontainer_lkv);
}

.bg-dark__ontertiarycontainer {
  background-color: var(--dark__ontertiarycontainer_lkv);
  color: var(--dark__tertiarycontainer_lkv);
}

.bg-dark__error {
  background-color: var(--dark__error_lkv);
  color: var(--dark__onerror_lkv);
}

.bg-dark__onerror {
  background-color: var(--dark__onerror_lkv);
  color: var(--dark__error_lkv);
}

.bg-dark__errorcontainer {
  background-color: var(--dark__errorcontainer_lkv);
  color: var(--dark__onerrorcontainer_lkv);
}

.bg-dark__onerrorcontainer {
  background-color: var(--dark__onerrorcontainer_lkv);
  color: var(--dark__errorcontainer_lkv);
}

.bg-dark__background {
  background-color: var(--dark__background_lkv);
  color: var(--dark__onbackground_lkv);
}

.bg-dark__onbackground {
  background-color: var(--dark__onbackground_lkv);
  color: var(--dark__background_lkv);
}

.bg-dark__surface {
  background-color: var(--dark__surface_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__onsurface {
  background-color: var(--dark__onsurface_lkv);
  color: var(--dark__surface_lkv);
}

.bg-dark__surfacevariant {
  background-color: var(--dark__surfacevariant_lkv);
  color: var(--dark__onsurfacevariant_lkv);
}

.bg-dark__onsurfacevariant {
  background-color: var(--dark__onsurfacevariant_lkv);
  color: var(--dark__surfacevariant_lkv);
}

.bg-dark__outline {
  background-color: var(--dark__outline_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__outlinevariant {
  background-color: var(--dark__outlinevariant_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__shadow {
  background-color: var(--dark__shadow_lkv);
  color: var(--dark__inversesurface_lkv);
}

.bg-dark__scrim {
  background-color: var(--dark__scrim_lkv);
  color: var(--dark__inversesurface_lkv);
}

.bg-dark__inversesurface {
  background-color: var(--dark__inversesurface_lkv);
  color: var(--dark__inverseonsurface_lkv);
}

.bg-dark__inverseonsurface {
  background-color: var(--dark__inverseonsurface_lkv);
  color: var(--dark__inversesurface_lkv);
}

.bg-dark__inverseprimary {
  background-color: var(--dark__inverseprimary_lkv);
  color: var(--dark__onprimarycontainer_lkv);
}

.bg-dark__success {
  background-color: var(--dark__success_lkv);
  color: var(--dark__onsuccess_lkv);
}

.bg-dark__successcontainer {
  background-color: var(--dark__successcontainer_lkv);
  color: var(--dark__onsuccesscontainer_lkv);
}

.bg-dark__onsuccess {
  background-color: var(--dark__onsuccess_lkv);
  color: var(--dark__success_lkv);
}

.bg-dark__onsuccesscontainer {
  background-color: var(--dark__onsuccesscontainer_lkv);
  color: var(--dark__successcontainer_lkv);
}

.bg-dark__warning {
  background-color: var(--dark__warning_lkv);
  color: var(--dark__onwarning_lkv);
}

.bg-dark__warningcontainer {
  background-color: var(--dark__warningcontainer_lkv);
  color: var(--dark__onwarningcontainer_lkv);
}

.bg-dark__onwarning {
  background-color: var(--dark__onwarning_lkv);
  color: var(--dark__warning_lkv);
}

.bg-dark__onwarningcontainer {
  background-color: var(--dark__onwarningcontainer_lkv);
  color: var(--dark__warningcontainer_lkv);
}

.bg-dark__info {
  background-color: var(--dark__info_lkv);
  color: var(--dark__oninfo_lkv);
}

.bg-dark__infocontainer {
  background-color: var(--dark__infocontainer_lkv);
  color: var(--dark__oninfocontainer_lkv);
}

.bg-dark__oninfo {
  background-color: var(--dark__oninfo_lkv);
  color: var(--dark__info_lkv);
}

.bg-dark__oninfocontainer {
  background-color: var(--dark__oninfocontainer_lkv);
  color: var(--dark__infocontainer_lkv);
}

.util-grid-filler.for-display {
  flex: 1;
  margin-bottom: 1em;
  padding: 1em;
}

.bg-dark__primaryfixed {
  background-color: var(--dark__primaryfixed_lkv);
  color: var(--dark__onprimaryfixed_lkv);
}

.bg-dark__primaryfixeddim {
  background-color: var(--dark__primaryfixeddim_lkv);
  color: var(--dark__onprimaryfixedvariant_lkv);
}

.bg-dark__onprimaryfixed {
  background-color: var(--dark__onprimaryfixed_lkv);
  color: var(--dark__primaryfixed_lkv);
}

.bg-dark__onprimaryfixedvariant {
  background-color: var(--dark__onprimaryfixedvariant_lkv);
  color: var(--dark__primaryfixed_lkv);
}

.bg-dark__secondaryfixed {
  background-color: var(--dark__secondaryfixed_lkv);
  color: var(--dark__onsecondary_lkv);
}

.bg-dark__secondaryfixeddim {
  background-color: var(--dark__secondaryfixeddim_lkv);
  color: var(--dark__onsecondaryfixed_lkv);
}

.bg-dark__onsecondaryfixed {
  background-color: var(--dark__onsecondaryfixed_lkv);
  color: var(--dark__secondaryfixed_lkv);
}

.bg-dark__onsecondaryfixedvariant {
  background-color: var(--dark__onsecondaryfixedvariant_lkv);
  color: var(--dark__secondaryfixed_lkv);
}

.bg-dark__tertiaryfixed {
  background-color: var(--dark__tertiaryfixed_lkv);
  color: var(--dark__ontertiaryfixed_lkv);
}

.bg-dark__tertiaryfixeddim {
  background-color: var(--dark__tertiaryfixeddim_lkv);
  color: var(--dark__ontertiaryfixedvariant_lkv);
}

.bg-dark__ontertiaryfixed {
  background-color: var(--dark__ontertiaryfixed_lkv);
  color: var(--dark__tertiaryfixed_lkv);
}

.bg-dark__ontertiaryfixedvariant {
  background-color: var(--dark__ontertiaryfixedvariant_lkv);
  color: var(--dark__tertiaryfixed_lkv);
}

.bg-dark__surfacedim {
  background-color: var(--dark__surfacedim_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__surfacebright {
  background-color: var(--dark__surfacebright_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__surfacecontainerlowest,
.bg-dark__surfacecontainerlow {
  background-color: var(--dark__surfacecontainerlowest_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__surfacecontainer {
  background-color: var(--dark__surfacecontainer_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__surfacecontainerhigh {
  background-color: var(--dark__surfacecontainerhigh_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__surfacecontainerhighest {
  background-color: var(--dark__surfacecontainerhighest_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg__transparent {
  background-color: rgba(0, 0, 0, 0);
}