@mixin contribution-heatmap {
  div {
    h4.total-contributions {}
    svg.vch__wrapper {
      g.vch__months__labels__wrapper {
        text.vch__month__label {
          fill: $white-dark;
        }
      }
      g.vch__days__labels__wrapper {
        text.vch__day__label {
          fill: $white-dark;
        }
      }
      g.vch__legend__wrapper {
        text {
          fill: $white-dark;
        }
        rect {
          @include contribution-heatmap-colors;
        }
      }
      g.vch__year__wrapper {
        g.vch__month__wrapper {
          rect.vch__day__square {
            @include contribution-heatmap-colors;
          }
        }
      }
    }
  }
}

@mixin contribution-heatmap-colors {
  &[style*="fill: rgb(244, 244, 244);"] {
    fill: $bg50 !important;
  }
  &[style*="fill: rgb(216, 239, 191);"] {
    fill: $bg60 !important;
  }
  &[style*="fill: rgb(159, 219, 129);"] {
    fill: $bg70 !important;
  }
  &[style*="fill: rgb(102, 199, 75);"] {
    fill: $bg80 !important;
  }
  &[style*="fill: rgb(96, 153, 38);"] {
    fill: $red-dark !important;
  }
  &[style*="fill: rgb(2, 89, 0);"] {
    fill: $red !important;
  }
}