////////////////////////////////////////
// THEME / UTILITIES / BACKGROUND COLORS
////////////////////////////////////////


@use "../mixins/" as mixins;


@media screen {

  // Scarlet
  .unl-bg-scarlet { @include mixins.bg-scarlet; }


  // Cream
  .unl-bg-cream { @include mixins.bg-cream; }


  // Gray
  .unl-bg-lightest-gray { @include mixins.bg-lightest; }
  .unl-bg-lighter-gray { @include mixins.bg-lighter; }
  .unl-bg-light-gray { @include mixins.bg-light; }
  .unl-bg-dark-gray { @include mixins.bg-dark; }
  .unl-bg-darker-gray { @include mixins.bg-darker; }
  .unl-bg-darkest-gray { @include mixins.bg-darkest; }


  // Cerulean
  .unl-bg-cerulean { @include mixins.bg-cerulean; }


  // Green
  .unl-bg-green { @include mixins.bg-green; }
  .unl-bg-light-green { @include mixins.bg-light-green; }


  // Blue
  .unl-bg-blue { @include mixins.bg-blue; }
  .unl-bg-light-blue { @include mixins.bg-light-blue; }


  // Purple
  .unl-bg-purple { @include mixins.bg-purple; }
  .unl-bg-light-purple { @include mixins.bg-light-purple; }


  // Yellow
  .unl-bg-yellow { @include mixins.bg-yellow; }


  // Orange
  .unl-bg-orange { @include mixins.bg-orange; }

}


@media screen and (prefers-color-scheme: dark) {

  // Cream
  .unl-bg-cream\@dark { @include mixins.bg-cream-at-dark; }


  // Gray
  .unl-bg-lightest-gray\@dark { @include mixins.bg-lightest-at-dark; }
  .unl-bg-lighter-gray\@dark { @include mixins.bg-lighter-at-dark; }
  .unl-bg-light-gray\@dark { @include mixins.bg-light-at-dark; }


  // Green
  .unl-bg-light-green\@dark { @include mixins.bg-light-green-at-dark; }


  // Blue
  .unl-bg-light-blue\@dark { @include mixins.bg-light-blue-at-dark; }


  // Purple
  .unl-bg-light-purple\@dark { @include mixins.bg-light-purple-at-dark; }

}