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

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

    &-rv {
      background-color: color($font-color);
      color: color($color);
    }

    &-iv {
      background-color: invert(color($color));
      color: invert(color($font-color));
    }

    &-cm {
      background-color: complement(color($color));
      color: complement(color($font-color));
    }

    &-light {
      background-color: color($color-light);
      color: color($font-color-light);
    }

    &-dark {
      background-color: color($color-dark);
      color: color($font-color-dark);
    }
  }

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

    &-light {
      color: color($color-light);
    }

    &-dark {
      color: color($color-dark);
    }
  }

  .m-tx-font-#{$color} {
    color: color(#{$font-color});

    &-light {
      color: color($font-color-light);
    }

    &-dark {
      color: color($font-color-dark);
    }
  }
}

.m {
  &-grey-1 {
    background-color: color('grey-dark-1');
    color: color('grey-light-1');
  }

  &-grey-2 {
    background-color: color('grey-dark-2');
    color: color('grey-light-2');
  }

  &-grey-3 {
    background-color: color('grey-dark-3');
    color: color('grey-light-3');
  }

  &-tx-grey-light-1 {
    color: color('grey-light-1');
  }

  &-tx-grey-light-2 {
    color: color('grey-light-2');
  }

  &-tx-grey-light-3 {
    color: color('grey-light-3');
  }

  &-tx-grey-dark-1 {
    color: color('grey-dark-1');
  }

  &-tx-grey-dark-2 {
    color: color('grey-dark-2');
  }

  &-tx-grey-dark-3 {
    color: color('grey-dark-3');
  }

  &-tx-white {
    color: color('white');
  }
}