@import '../../../brand-globals/src/less/backgrounds';

// BACKGROUND VARIANTS

// ##

// This template for background-variants should be used in each brand.
// If a background variant is made inverse or non-inverse, make sure to define them in the correct order: Inverse; Normal.

// ====== UNCOMMENT AND COPY/PASTE EVERYTHING BELOW… ======

//
// Contextual backgrounds
// --------------------------------------------------

// Inverse background variant mixin
// Apply this to all background variants that require inverting
.bg-inverse() {
  .background-variant-inverse(@bg: @bg-inverse);

  // Automatically normalise any nested non-inverse backgrounds
  .bg-brand,
  .bg-default {
    .bg-normal;
  }

  .bg-muted {
    &,
    .bg-normal &,
    .bg-default & {
      background-color: @bg-muted-inverse;
    }

    &.bg-default,
    &.bg-normal {
      background-color: @bg-muted-inverse-normal;
    }
  }

  .bg-default.bg-muted,
  .bg-default .bg-muted {
    background-color: @bg-muted;
  }
}


// Inverse backgrounds
// ##

.bg-primary {
  .bg-inverse;
  background-color: @bg-primary;
}

.bg-tertiary {
  .bg-inverse;
  background-color: @bg-tertiary;
}
.bg-brand {
  .bg-inverse;
  background-color: @bg-brand;
}


// Normal backgrounds
// ##

.bg-normal {
  .background-variant(@bg: @bg-default);
}

.bg-default {
  background-color: @bg-default;
}

.bg-secondary {
  background-color: @bg-secondary;
}

.bg-muted {
  &,
  &.bg-default,
  .bg-default &,
  .bg-normal & {
    background-color: @bg-muted;
  }
}