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


// Dots
@mixin bg-dots($imp:null) {
  background-size: #{ms(-4)}rem $imp; // .56rem
}


@mixin bg-dots-gray($imp:null) {
  background-image: url('../images/bg-dots-gray.svg') $imp;
}


@mixin bg-dots-scarlet($imp:null) {
  background-image: url('../images/bg-dots-scarlet.svg') $imp;
}


// 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) $imp;
}


// 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) $imp;
}


// 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) $imp;
}


// Diagonal Gradient (single)
@mixin bg-diagonal-gradient($imp:null) {
  background-image: linear-gradient($diagonal2, fade-out($black,.44) 25%, fade-out($black,.82) 75%) $imp;
}


// Diagonal Gradients (multiple)
@mixin bg-diagonal-gradients($imp:null) {
  background-image: linear-gradient($diagonal1, $black, fade-out($black,.75) 24%, fade-out($black,.25) 24%, transparent 32%, fade-out($black,.5) 32%, fade-out($black,.75) 75%, fade-out($black,.25) 75%, fade-out($black,.75) 84%, fade-out($black,.25) 84%, transparent) $imp;
}


// SVG Background Pattern: Campus
@mixin bg-campus($imp:null) {
  background-image: url('../images/bg-campus.svg') $imp;
  background-size: 20em $imp;
}


// SVG Background Pattern: Landmarks
@mixin bg-landmarks($imp:null) {
  background-image: url('../images/bg-landmarks.svg') $imp;
  background-size: 40em $imp; // Yes, this should be a different size than the others.
}


// SVG Background Pattern: Majors
@mixin bg-majors($imp:null) {
  background-image: url('../images/bg-majors.svg') $imp;
  background-size: 20em $imp;
}