@each $theme in $themes {
  $color: $theme;
  $color-light: $theme + '-light';
  $color-dark: $theme + '-dark';

  .m-bg-#{$color} {
    background-color: color($color);
  }

  .m-bg-#{$color-light} {
    background-color: color($color-light);
  }

  .m-bg-#{$color-dark} {
    background-color: color($color-dark);
  }

  .m-bg-gd-#{$theme} {
    &-t {
      background: gradient-linear(to top, color($color-light), color($color-dark));
    }

    &-b {
      background: gradient-linear(to bottom, color($color-light), color($color-dark));
    }

    &-l {
      background: gradient-linear(to left, color($color-light), color($color-dark));
    }

    &-r {
      background: gradient-linear(to right, color($color-light), color($color-dark));
    }

    &-tl {
      background: gradient-linear(to top left, color($color-light), color($color-dark));
    }

    &-bl {
      background: gradient-linear(to bottom left, color($color-light), color($color-dark));
    }

    &-tr {
      background: gradient-linear(to top right, color($color-light), color($color-dark));
    }

    &-br {
      background: gradient-linear(to bottom right, color($color-light), color($color-dark));
    }
  }
}

@each $grey in $greys {
  $color: $grey;

  .m-bg-#{$color} {
    background-color: color($color);
  }
}

.m-bg-white {
  background-color: color('white');
}

.m-bg-glass {
  background-color: rgba(255, 255, 255, 0.2);
}

.m-bg-tp {
  background-color: transparent;
}