$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "error": $error,
  "info": $info,
  "blue": #1919e6,
  "red": #e61919,
  "yellow": #e6e619,
  "green": #19e635,
  "orange": #ffa600,
  "purple": #9900ff,
  "gray": #808080,
  "black": black,
  "white": white,
);



.card {
  display: block;
  padding: $base-padding;
  border: $base-border-thickness solid $light-grey;
  border-radius: $base-border-radius;
  box-shadow: $base-box-shadow;

  // Loop over all keys in the colors map and use them for background color variations
  @each $key, $val in $colors {
    &--bgcolor-#{$key} {
      background-color: $val;

        // Change text to white if the color is purple
    	// change the text to yellow if the color is red
    	// else leave it at black
      @if $key == "purple" {
        .card__body p {
          color: map-get($colors, "white" )
        }
      } @else if $key == "red"{
        .card__body p {
          color: map-get($colors, "yellow")
        }
      }@else {
        .card__body p {
          color: #000;
        }
      }
    }
  }

  &__title {
    h3 {
      font-size: $font-size-lg;
      padding-bottom: $base-padding;
      font-weight: bold;
    }
  }

  &__body {
    font-size: $base-font-size;

    a {
      text-decoration: underline;
    }
  }
}