@mixin box-shadow($color, $top, $left, $blur, $spread, $inset: false) {
  @if $inset {
    -webkit-box-shadow: inset $top $left $blur $spread $color;
    -moz-box-shadow: inset $top $left $blur $spread $color;
    box-shadow: inset $top $left $blur $spread $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $spread $color;
    -moz-box-shadow: $top $left $blur $spread $color;
    box-shadow: $top $left $blur $spread $color;
  }
}

@mixin transition($transition-properties...) {
  -webkit-transition: $transition-properties;
  -moz-transition: $transition-properties;
  -ms-transition: $transition-properties;
  -o-transition: $transition-properties;
  transition: $transition-properties;
}

@mixin transform($transform-properties...) {
  -ms-transform: $transform-properties; /* IE 9 */
  -webkit-transform: $transform-properties; /* Chrome, Safari, Opera */
  transform: $transform-properties;
}

@mixin hero-gradient($opacity, $distance_as_percent) {
  &:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(rgba(0, 0, 0, $opacity), transparent $distance_as_percent);
  }
}

$shadow-color: rgba(color('gray-500'), 0.6);
$color-card-bg: color('white');

%no-shadow {
  @include box-shadow(transparent, 0, 0, 0, 0);
  text-shadow: none;
}

%card-shadow {
  @include box-shadow($shadow-color, 0, 2px, 4px, 0);
}

%footer-shadow {
  @include box-shadow(lighten($shadow-color, 30%), 0, -1px, 2px, 0);
}

%text-shadow {
  text-shadow: $shadow-color 0 1px 2px;
}

%item-shadow {
  @include box-shadow($shadow-color, 1px, 1px, 1px, 0);
}

%inset-shadow {
  @include box-shadow($shadow-color, 0, 2px, 3px, 0, true);
}

%hero-gradient {
  @include hero-gradient(0.5, 15%);
}

%card-style {
  @extend %card-shadow;
  background-color: $color-card-bg;
}
.card {
  @extend %card-style;
}

%item-style {
  background-color: color('gray-100');
  color: color('gray-600');
  border: 1px solid color('gray-400');
  border-radius: $border-radius-default;
  text-shadow: none;
}

%btn-style {
  @extend %item-style;
  @extend %item-shadow;
  height: $btn-size;
  padding: $padding-default-vertical $btn-padding-default-horizontal;
  line-height: 1.3;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: $font-size-300;
  border: 2px solid color('gray-100');

  @include transition(background-color 0.3s ease, border 0.3s ease);

  &:active:focus {
    @extend %inset-shadow;
    outline: none;
    background-color: color('silver');
  }

  &:hover,
  &:focus,
  &:active {
    outline: none;
  }
}

%check-style {
  display: block;
  height: $btn-xs-size;
  width: $btn-xs-size;
  @extend %item-shadow;
  font-size: $font-size-default;
  text-align: center;

  @include transition(background-color 0.3s ease, color 0.3s ease);
}

.polaroid_photo_border {
  border: 8px solid color('gray-100');
  @extend %item-shadow;
}

// creates a sawtooth banner style for each color in core color dictionary
@each $id, $color in $core_colors {
  $sawtooth-size: 8px;
  $sawtooth-border: 15px;

  %sawtooth-#{$id} {
    position: relative;
    background: color('#{$id}-light');

    &:before, &:after {
      content:'';
      width:100%;
      height: $sawtooth-size + $sawtooth-border;
      position: absolute;
      bottom: 100%;
      left: 0;
      background-image: linear-gradient(135deg, transparent 66%, color('#{$id}') 67%),
      linear-gradient(45deg, color('#{$id}') 33%, color('#{$id}-dark') 34%, transparent 44%);
      background-position: -$sawtooth-size 0;
      background-size: ($sawtooth-size * 2) 100%;
      background-repeat: repeat-x;
    }
    &:after {
      top: 100%;
      bottom: auto;
      background-image: linear-gradient(135deg, color('#{$id}') 33%, color('#{$id}-dark') 34%, transparent 44%),
      linear-gradient(45deg, transparent 66%, color('#{$id}') 67%);
      border-top: solid $sawtooth-border color('#{$id}');
    }
    &:before {
      border-bottom: solid $sawtooth-border color('#{$id}');
    }
  }
}

// add this class to any section to add a slant effect to the top of that element
// custom positioning required for resize of end spectrums -> xxl and sm screens
$slant-position-top: -40px;
$slant-position-top-sm: -15px;
$slant-position-top-xxl: -80px;

$slant-height: 95px;
$slant-height-sm: 65px;
$slant-height-xxl: 220px;

$slant-angle-left: -182deg;
$slant-angle-right: 182deg;

.slant::before {
  content: "";
  display: block;
  position: relative;
  top: $slant-position-top;
  height: $slant-height;
  background-color: inherit;

  // @media (min-width: $screen-xxl) {
  //   top: $slant-position-top-xxl;
  //   height: $slant-height-xxl;
  // }

  @media (max-width: $screen-sm) {
    top: $slant-position-top-sm;
    height: $slant-height-sm;
  }
}

.slant-left::before {
  @include transform(skewY($slant-angle-left));
}

.slant-right::before {
  @include transform(skewY($slant-angle-right));
}