/////////////////////////////////////
// THEME / MIXINS / BACKGROUND IMAGES
/////////////////////////////////////


// Grit
@mixin bg-grit($imp:null) {
  // Don't use background shorthand. Allow grit to be applied over any background-color.
  background-image: url('../images/bg-grit.png') $imp;
  background-position: 50% 50% $imp;
  background-repeat: repeat $imp;
  background-size: 80px $imp;

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  	background-image: url('../images/bg-grit_2x.png') $imp;
  }

}


// Diagonal Stripes: Scarlet
@mixin bg-stripes-scarlet($imp:null) {
  background-image: repeating-linear-gradient($diagonal1, $scarlet, $scarlet 2px, transparent 2px, transparent 4px);
}


// Diagonal Stripes: Dark
@mixin bg-stripes-dark($imp:null) {
//   background-image: url('../images/diagonal-stripe-bg.svg');
//   background-repeat: repeat;
//   background-image: repeating-linear-gradient($diagonal1, rgba($color-body,.1), rgba($color-body,.1) 2px, transparent 2px, transparent 4px);
  background-image: repeating-linear-gradient($diagonal1, fade-out($color-body-light-mode,.9), fade-out($color-body-light-mode,.9) 2px, fade-out($color-body-light-mode,1) 2px, fade-out($color-body-light-mode,1) 5px);
}


// Diagonal Stripes: Light
@mixin bg-stripes-light($imp:null) {
  background-image: repeating-linear-gradient($diagonal1, fade-out($white,.95), fade-out($white,.95) 2px, fade-out($white,1) 2px, fade-out($white,1) 5px);
}