// 3D CSS Ribbon ------------------------------------------------------------
// Plugin by Leandro D'Onofrio - http://dzign.us/

//** Default variables for the ribbon **//

$ribbon-3d-background-color: #428bca!default;
$ribbon-3d-position: bottom!default;
$ribbon-3d-sides: left right!default;
$ribbon-3d-overlap-horizontal: 30px!default;
$ribbon-3d-overlap-vertical: 20px!default;
$ribbon-3d-overlap-color: darken($ribbon-3d-background-color, 30%)!default;

//** 3D CSS Ribbon mixin **//

@mixin ribbon(

    // Set the background color of the ribbon
    $background-color    : $ribbon-3d-background-color,
    
    // Set the position of the sides
    $position            : $ribbon-3d-position,

    // Set the sides of the ribbon
    $sides               : $ribbon-3d-sides,
    
    // Set the width of the overlaps
    $overlap-horizontal  : $ribbon-3d-overlap-horizontal,
    
    // Set the height of the overlaps
    $overlap-vertical    : $ribbon-3d-overlap-vertical,

    // Set the color of the edges
    $overlap-color       : $ribbon-3d-overlap-color

  ) {

    background-color: $background-color;
    position: relative;
    z-index: 6;

    &:before, &:after{
      content: "";
      width: 0; 
      height: 0;
      position: absolute;
      font-size: 0;
      line-height: 0;
      z-index: 5;

      @if $position == "bottom" {
        border-top: 0 solid transparent;
        border-bottom: $overlap-vertical solid transparent;
        bottom: -$overlap-vertical;
      }

      @if $position == "top" {
        border-bottom: 0 solid transparent;
        border-top: $overlap-vertical solid transparent;
        top: -$overlap-vertical;
      }

    }

    $sides-length: length($sides);

    @if ($sides == right) or ($sides-length == 2) {

      &:before{
        border-left: $overlap-horizontal solid $overlap-color;
        right: 0;
      }

    }

    @if ($sides == left) or ($sides-length == 2) {

      &:after{
        border-right: $overlap-horizontal solid $overlap-color;
        left: 0;
      }

    }

}

//** Default variables for the ribbon's back **//

$ribbon-3d-back-background-color: $ribbon-3d-background-color!default;
$ribbon-3d-back-position: $ribbon-3d-position!default;
$ribbon-3d-back-height: 40px!default;
$ribbon-3d-back-width: 60px!default;
$ribbon-3d-back-horizontal-distance: $ribbon-3d-overlap-horizontal!default;
$ribbon-3d-back-vertical-distance: $ribbon-3d-overlap-vertical!default;
$ribbon-3d-back-snip-color: transparent!default;

//** 3D CSS Ribbon mixin's back **//

@mixin ribbon-back(

    // The side to create
    $side,

    // Set the background color of the ribbon's back
    $background-color    : $ribbon-3d-back-background-color,

    // Set the position of the ribbon's back
    $position            : $ribbon-3d-back-position,

    // Set the height of the ribbon's back
    $height              : $ribbon-3d-back-height,

    // Set the width of the ribbon's back
    $width               : $ribbon-3d-back-width,

    // Set the vertical distance of the ribbon's back
    $horizontal-distance : $ribbon-3d-back-horizontal-distance,

    // Set the horizontal distance of the ribbon's back
    $vertical-distance   : $ribbon-3d-back-vertical-distance,

    // Set the color of the back's snip
    $snip-color          : $ribbon-3d-back-snip-color

  ){

  display: block;
  height: $height;
  width: $width;
  background-color: $background-color;
  position: absolute;
  z-index: -1;

  @if $side == left {
    left: - ($width - $horizontal-distance);
  }

  @if $side == right {
    right: - ($width - $horizontal-distance);
  }

  @if $position == bottom {
    bottom: -$vertical-distance;
  }

  @if $position == top {
    top: -$vertical-distance;
  }

  @if $snip-color != transparent {

    &:before{
      content: "";
      width: 0; 
      height: 0;
      position: absolute;
      font-size: 0;
      line-height: 0;
      border-bottom: $height / 2 solid transparent;
      border-top: $height / 2 solid transparent;

      @if $side == left {
        border-left: ($height / 2) / 2 solid $snip-color;
        left: 0;
      }

      @if $side == right {
        border-right: ($height / 2) / 2 solid $snip-color;
        right: 0;
      }

    }

  }

}