@include bg-variant-classes();

.color--dark-shade-main {
  @include color-dark-shade-main;
}

.color--dark-shade-alterative {
  @include color-dark-shade-alternative;
}

// ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
// brand blue
.bg-brand--blue {
  background: $color-brand--one;
  color: $color-brand--white;

  a {
    color: $color-brand--white;
  }
}

// brand dark blue
.bg-brand--dark-blue {
  background: $color-brand--two;
  color: $color-brand--white;

  a {
    color: $color-brand--white;
  }
}

// brand turquoise
.bg-brand--turquoise {
  background: $color-brand--three;
  color: $color-brand--two;

  a {
    color: $color-brand--two;
  }
}

// brand red
.bg-brand--red {
  background: $color-brand--five;
  color: $color--two-180;

  a {
    color: $color--two-180;
  }
}

// UI-negative
.bg-ui--negative {
  background: $color--negative;
  color: $color--two-180;

  a {
    color: $color--two-180;
  }
}

// brand yellow
.bg-brand--yellow {
  background: $color-brand--six;
  color: $color-brand--two;

  a {
    color: $color-brand--two;
  }
}

//brand white
.bg--brand--white {
  background: $color-brand--white;
  color: $color-brand--two;

  a {
    color: $color-brand--one;
  }
}

// brand off-white
.bg-brand--off-white {
  background: $color-brand--four;
  color: $color-brand--two;

  a {
    color: $color-brand--one;
  }
}

// greyscale grey-10
.bg-greyscale--grey-10 {
  background: $color--grey-10;
}

// background off-white standalone
.bg-brand-tertiary {
  background: $color-brand--four;
}
