@mixin box-shadow($color, $top, $left, $blur, $inset: false) {
  @if $inset {
    -webkit-box-shadow: inset $top $left $blur $color;
    -moz-box-shadow: inset $top $left $blur $color;
    box-shadow: inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $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 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);
  text-shadow: none;
}

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

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

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

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

%inset-shadow {
  @include box-shadow(0, 2px, 3px, $shadow-color, 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;
  text-align: center;
  font-size: $font-size-300;
  border: 0;

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

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

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

%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);
}

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