// PRODUCT RATINGS
//
// ##

// Product rating color scale
// - Ideal for use with labels, instead of label-* variant classes
.product-rating-max    { background: @product-rating-max; }
.product-rating-higher { background: @product-rating-higher; }
.product-rating-high   { background: @product-rating-high; }
.product-rating-medium { background: @product-rating-medium; }
.product-rating-low    { background: @product-rating-low; }
.product-rating-lower  { background: @product-rating-lower; }
.product-rating-none   { background: @product-rating-none; }


// 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-secondary {
//   .bg-inverse;
//   background-color: @bg-secondary;
// }

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


// // Normal backgrounds
// // ##

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

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

// .bg-brand {
//   background-color: @bg-brand;
// }

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

.gradient-filter {
  position: relative;

  &::before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 22.92%, rgba(0, 0, 0, 0.9) 100%)
  }

  & > p,
  & > div {
    z-index: 9;
  }
}

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

.bg-white-opacity-85 {
  background-color: rgba(255, 255, 255, .85);

  &:hover,
  &:active {
    background-color: rgba(255, 255, 255, .85);
  }
}