// Background Colours
//
// To be used by paragraphs and body copy

// CR Colours

/* New stuff */

// Primary backgrounds, will have dark text ('light' group)
.bg--grey {
  background-color: $colour-grey;
}

.bg--coral {
  background-color: $colour-coral;
}

.bg--orange {
  background-color: $colour-orange;
}

.bg--yellow {
  background-color: $colour-yellow;
}

.bg--green {
  background-color: $colour-green;
}

.bg--blue {
  background-color: $colour-blue;
}

.bg--magenta {
  background-color: $colour-magenta;
}

.bg--purple {
  background-color: $colour-purple;
}

.bg--teal {
  background-color: $colour-teal;
}

.bg--red {
  background-color: $colour-red;
}

// Light backgrounds, will have deep-violet text ('light' group)
.bg--white {
  background-color: $colour-white;
}

.bg--light-grey {
  background-color: $colour-light-grey;
}

.bg--light-coral {
  background-color: $colour-light-coral;
}

.bg--light-orange {
  background-color: $colour-light-orange;
}

.bg--light-yellow {
  background-color: $colour-light-yellow;
}

.bg--light-green {
  background-color: $colour-light-green;
}

.bg--light-blue {
  background-color: $colour-light-blue;
}

.bg--light-magenta {
  background-color: $colour-light-magenta;
}

.bg--light-purple {
  background-color: $colour-light-purple;
}

.bg--light-teal {
  background-color: $colour-light-teal;
}

// Dark backgrounds, will have white text ('dark' group)
.bg--deep-violet {
  background-color: $colour-deep-violet;
}

.bg--dark-grey {
  background-color: $colour-dark-grey;
}

.bg--dark-coral {
  background-color: $colour-dark-coral;
}

.bg--dark-orange {
  background-color: $colour-dark-orange;
}

.bg--dark-yellow {
  background-color: $colour-dark-yellow;
}

.bg--dark-green {
  background-color: $colour-dark-green;
}

.bg--dark-blue {
  background-color: $colour-dark-blue;
}

.bg--dark-magenta {
  background-color: $colour-dark-magenta;
}

.bg--dark-purple {
  background-color: $colour-dark-purple;
}

.bg--dark-teal {
  background-color: $colour-dark-teal;
}

/**
 * Needed to break-out these bg styles out a bit as the mutiple
 * nested selectors were breaking the styles and/or getting them overridden? Weird. **/
@mixin dark-backgrounds {

  // Set fonts to white
  h1,
  h2,
  h3,
  h4,
  h5,
  p,
  .link {
    color: $colour-white;
  }

  // Ensure any light bg-colour'd children can override the above styles where neccessary
  .bg--light-grey,
  .bg--light-coral,
  .bg--light-orange,
  .bg--light-yellow,
  .bg--light-green,
  .bg--light-blue,
  .bg--light-magenta,
  .bg--light-purple,
  .bg--light-teal,
  .bg--white,
  .bg--grey,
  .bg--coral,
  .bg--orange,
  .bg--yellow,
  .bg--green,
  .bg--blue,
  .bg--magenta,
  .bg--purple,
  .bg--teal {

    h1,
    h2,
    h3,
    h4,
    h5,
    p,
    .link {
      color: $colour-black;
    }
  }
}

@mixin light-backgrounds {

  h1,
  h2,
  h3,
  h4,
  h5,
  p,
  .link {
    color: $colour-black;
  }

  // Ensure any light bg-colour'd children can override the above styles where neccessary
  .bg--dark-grey,
  .bg--dark-coral,
  .bg--dark-orange,
  .bg--dark-yellow,
  .bg--dark-green,
  .bg--dark-blue,
  .bg--dark-magenta,
  .bg--dark-purple,
  .bg--dark-teal,
  .bg--deep-violet,
  .bg--red {

    h1,
    h2,
    h3,
    h4,
    h5,
    p,
    .link {
      color: $colour-white;
    }
  }
}


// Standard backgrounds (dark text)
.bg--grey {
  @include light-backgrounds;
}

.bg--coral {
  @include light-backgrounds;
}

.bg--orange {
  @include light-backgrounds;
}

.bg--yellow {
  @include light-backgrounds;
}

.bg--green {
  @include light-backgrounds;
}

.bg--blue {
  @include light-backgrounds;
}

.bg--magenta {
  @include light-backgrounds;
}

.bg--purple {
  @include light-backgrounds;
}

.bg--teal {
  @include light-backgrounds;
}

// Light backgrounds (dark text)
.bg--light-grey {
  @include light-backgrounds;
}

.bg--light-coral {
  @include light-backgrounds;
}

.bg--light-orange {
  @include light-backgrounds;
}

.bg--light-yellow {
  @include light-backgrounds;
}

.bg--light-green {
  @include light-backgrounds;
}

.bg--light-blue {
  @include light-backgrounds;
}

.bg--light-magenta {
  @include light-backgrounds;
}

.bg--light-purple {
  @include light-backgrounds;
}

.bg--light-teal {
  @include light-backgrounds;
}

.bg--white {
  @include light-backgrounds;
}

// Dark backgrounds (white text)
.bg--deep-violet {
  @include dark-backgrounds;
}

.bg--dark-grey {
  @include dark-backgrounds;
}

.bg--dark-coral {
  @include dark-backgrounds;
}

.bg--dark-orange {
  @include dark-backgrounds;
}

.bg--dark-yellow {
  @include dark-backgrounds;
}

.bg--dark-green {
  @include dark-backgrounds;
}

.bg--dark-blue {
  @include dark-backgrounds;
}

.bg--dark-magenta {
  @include dark-backgrounds;
}

.bg--dark-purple {
  @include dark-backgrounds;
}

.bg--dark-teal {
  @include dark-backgrounds;
}

.bg--red {
  @include dark-backgrounds;
}