@if $theme-bg {
  .theme-bg {
    background: $theme-bg;
  }


  .theme-bg-dark {
    background: gradient-mask(black, 0.1), $theme-bg;
  }

  .theme-bg-darker {
    background: gradient-mask(black, 0.2), $theme-bg;
  }

  .theme-bg-darkest {
    background: gradient-mask(black, 0.3), $theme-bg;
  }


  .theme-bg-light {
    background: gradient-mask(white, 0.1), $theme-bg;
  }

  .theme-bg-lighter {
    background: gradient-mask(white, 0.2), $theme-bg;
  }

  .theme-bg-lightest {
    background: gradient-mask(white, 0.3), $theme-bg;
  }
} @else {
  .theme-bg {
    background-color: $theme-bg-color;
  }


  .theme-bg-dark {
    background-color: darken($theme-bg-color, $theme-color-interval);
  }

  .theme-bg-darker {
    background-color: darken($theme-bg-color, $theme-color-interval * 2);
  }

  .theme-bg-darkest {
    background-color: darken($theme-bg-color, $theme-color-interval * 3);
  }


  .theme-bg-light {
    background-color: lighten($theme-bg-color, $theme-color-interval);
  }

  .theme-bg-lighter {
    background-color: lighten($theme-bg-color, $theme-color-interval * 2);
  }

  .theme-bg-lightest {
    background-color: lighten($theme-bg-color, $theme-color-interval * 3);
  }
}