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

@use "sass:color";
@use "../variables/" as var;


// Shifts
@mixin bg-shift-top($imp:null) {
  background-image: linear-gradient(180deg,
    transparent var.$bg-shift-size,
    var(--bg-shift-color) var.$bg-shift-size) $imp;
}


@mixin bg-shift-bottom($imp:null) {
  background-image: linear-gradient(180deg,
    var(--bg-shift-color) calc(100% - var.$bg-shift-size),
    transparent calc(100% - var.$bg-shift-size)) $imp;
}


// Shifts with stripes
@mixin bg-shift-stripe-top($imp:null) {
  background-image: linear-gradient(180deg,
    transparent var.$bg-shift-size,
    var(--bg-shift-color) var.$bg-shift-size,
    var(--bg-shift-color) calc(var.$bg-shift-size + 2px),
    transparent calc(var.$bg-shift-size + 2px),
    transparent calc(var.$bg-shift-size + 5px),
    var(--bg-shift-color) calc(var.$bg-shift-size + 5px)) $imp;
}


@mixin bg-shift-stripe-bottom($imp:null) {
  background-image: linear-gradient(180deg,
    var(--bg-shift-color) calc(100% - var.$bg-shift-size - 5px),
    transparent calc(100% - var.$bg-shift-size - 5px),
    transparent calc(100% - var.$bg-shift-size - 2px),
    var(--bg-shift-color) calc(100% - var.$bg-shift-size - 2px),
    var(--bg-shift-color) calc(100% - var.$bg-shift-size),
    transparent calc(100% - var.$bg-shift-size)) $imp;
}


// Shift colors
@mixin bg-shift-cream         { --bg-shift-color: var(--bg-body); }
@mixin bg-shift-lightest-gray { --bg-shift-color: var(--bg-lightest-gray); }
@mixin bg-shift-lighter-gray  { --bg-shift-color: var(--bg-lighter-gray); }
@mixin bg-shift-light-gray    { --bg-shift-color: var(--bg-light-gray); }
@mixin bg-shift-dark-gray     { --bg-shift-color: #{var.$dark-gray}; }
@mixin bg-shift-darker-gray   { --bg-shift-color: #{var.$darker-gray}; }
@mixin bg-shift-darkest-gray  { --bg-shift-color: #{var.$darkest-gray}; }
@mixin bg-shift-scarlet       { --bg-shift-color: #{var.$bg-color-brand-alpha}; }


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


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


@mixin bg-dots-scarlet($imp:null) {
  background-image: url('@images/bg-dots-scarlet.svg?no-inline') $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?no-inline') $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?no-inline') $imp;
  }

}


// Diagonal Stripes: Scarlet
@mixin bg-stripes-scarlet($imp:null) {
  background-image: repeating-linear-gradient(var.$diagonal1, var.$scarlet, var.$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(
    var.$diagonal1,
    color.adjust(var.$color-body-light-mode, $alpha: -0.9),
    color.adjust(var.$color-body-light-mode, $alpha: -0.9) 2px,
    color.adjust(var.$color-body-light-mode, $alpha: -1) 2px,
    color.adjust(var.$color-body-light-mode, $alpha: -1) 5px
  ) $imp;
}


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


// Diagonal Gradient (single)
@mixin bg-diagonal-gradient($imp:null) {
  background-image: linear-gradient(
    var.$diagonal2,
    color.adjust(var.$black, $alpha: -0.44) 25%,
    color.adjust(var.$black, $alpha: -0.82) 75%
  ) $imp;
}


// Diagonal Gradients (multiple)
@mixin bg-diagonal-gradients($imp:null) {
  background-image: linear-gradient(
    var.$diagonal1,
    var.$black,
    color.adjust(var.$black, $alpha: -0.75) 24%,
    color.adjust(var.$black, $alpha: -0.25) 24%,
    transparent 32%,
    color.adjust(var.$black, $alpha: -0.5) 32%,
    color.adjust(var.$black, $alpha: -0.75) 75%,
    color.adjust(var.$black, $alpha: -0.25) 75%,
    color.adjust(var.$black, $alpha: -0.75) 84%,
    color.adjust(var.$black, $alpha: -0.25) 84%,
    transparent
  ) $imp;
}


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


// SVG Background Pattern: Landmarks
@mixin bg-landmarks($imp:null) {
  background-image: url('@images/bg-landmarks.svg?no-inline') $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?no-inline') $imp;
  background-size: 20em $imp;
}
