// =============================================================================
// _BACKGROUNDS.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Background Clipping
//   02. Alpha Transparency
//   03. Gradients
//       a. Horizontal
//       b. Vertical
//       c. Vertical (3 Colors)
//       d. Directional
//       e. Striped
// =============================================================================

// Background Clipping
// =============================================================================

@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
          background-clip: $clip;
}



// Alpha Transparency
// =============================================================================

//
// Add an alpha transparency value to any 'background-color' or 'border-color'.
//

@mixin translucent-background($color: $white, $alpha: 1) {
  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
}

@mixin translucent-border($color: $white, $alpha: 1) {
  border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
  @include background-clip(padding-box);
}



// Gradients
// =============================================================================

//
// Horizontal.
//

@mixin gradient-horizontal($startColor: #555555, $endColor: #333333) {
  background-color: $endColor;
  background-image: -webkit-linear-gradient(left, $startColor, $endColor);
  background-image: linear-gradient(left, $startColor, $endColor);
  background-repeat: repeat-x;
}


//
// Vertical.
//

@mixin gradient-vertical($startColor: #555555, $endColor: #333333) {
  background-color: mix($startColor, $endColor, 60%);
  // background-image: -webkit-linear-gradient(top, $startColor, $endColor);
  // background-image: linear-gradient(top, $startColor, $endColor);
  background-image: -webkit-linear-gradient(to bottom, $startColor, $endColor);
  background-image: linear-gradient(to bottom, $startColor, $endColor);
  background-repeat: repeat-x;
}


//
// Vertical (3 colors).
//

@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
  background-color: mix($midColor, $endColor, 80%);
  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-repeat: no-repeat;
}


//
// Directional.
//

@mixin gradient-directional($startColor: #555555, $endColor: #333333, $deg: 45deg) {
  background-color: $endColor;
  background-image: -webkit-linear-gradient($deg, $startColor, $endColor);
  background-image: linear-gradient($deg, $startColor, $endColor);
  background-repeat: repeat-x;
}


//
// Striped.
//

@mixin gradient-striped($color, $angle: -45deg) {
  background-color: $color;
  background-image: -webkit-linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0));
}