
.ribbon-wrapper {
  width: 72px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
  pointer-events: none;
}

.ribbon {
  font: bold 12px $font-family-bold;
  color: $gray-darker;
  text-align: center;
  text-shadow: rgba(255,255,255,0.2) 0px 1px 0px;
  position: relative;
  padding: 3px 0;
  left: -4px;
  top: 16px;
  width: 99px;
  @include box-shadow(2px 3px 3px rgba(0,0,0,0.2));
  transform: rotate(45deg);


  &:before, &:after{
    content: "";
    border-left:  3px solid transparent;
    border-right: 3px solid transparent;
    position:absolute;
    bottom: -3px;
  }

  &.ribbon-default{
    color: $gray-lighter;
    background-color: darken($modal-content-bg, 3%);
    background-image: linear-gradient(top, darken($modal-content-bg, 6%), darken($gray-dark, 3%));

    &:before, &:after{
      border-top:   3px solid darken($gray-dark, 23%);
    }
  }

  &.ribbon-green{
    background-color: $green;
    background-image: linear-gradient(top, darken($green, 3%), darken($green-dark, 3%));

    &:before, &:after{
      border-top:   3px solid darken($green-dark, 23%);
    }
  }

  &.ribbon-orange{
    background-color: $orange;
    background-image: linear-gradient(top, darken($orange, 3%), darken($orange-dark, 3%));

    &:before, &:after{
      border-top:   3px solid darken($orange-dark, 18%) ;
    }
  }

  &.ribbon-red{
    background-color:  $red;
    background-image: linear-gradient(top, darken($red, 10%), darken($red, 18%));

    &:before, &:after{
      border-top:   3px solid darken($red, 38%);
    }
  }

  &.ribbon-blue{
    background-color: $blue;
    background-image: linear-gradient(top, darken($blue, 3%), darken($blue-dark, 3%));

    &:before, &:after{
      border-top:   3px solid darken($blue-dark, 18%);
    }
  }

}

.ribbon:before {
  left: 0;
}
.ribbon:after {
  right: 0;
}