.ribbon {
  position: relative;
  display: inline-block;
  padding: 8px 9px;
  font-size: inherit;
  line-height: 1;
  border: 1px solid;

  font-weight: $font-weight-bold;

  > [class*='fa-']:last-child {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    font-size: $font-size-lg;
  }
}

.ribbon-1 {
  background-color: $colorRibbon1;
  color: $colorRibbonFont1;
  border-color: $colorRibbonBorder1;
}

.ribbon-2 {
  background-color: $colorRibbon2;
  color: $colorRibbonFont2;
  border-color: $colorRibbonBorder2;
}

.ribbon-3 {
  background-color: $colorRibbon3;
  color: $colorRibbonFont3;
  border-color: $colorRibbonBorder3;
}

.ribbon-4 {
  background-color: $colorRibbon4;
  color: $colorRibbonFont4;
  border-color: $colorRibbonBorder4;
}

.ribbon-5 {
  background-color: $colorRibbon5;
  color: $colorRibbonFont5;
  border-color: $colorRibbonBorder5;
}

.ribbon-6 {
  background-color: $colorRibbon6;
  color: $colorRibbonFont6;
  border-color: $colorRibbonBorder6;
}

.ribbon-7 {
  background-color: $colorRibbon7;
  color: $colorRibbonFont7;
  border-color: $colorRibbonBorder7;
}

.ribbon-8 {
  background-color: $colorRibbon8;
  color: $colorRibbonFont8;
  border-color: $colorRibbonBorder8;
}

.ribbon-9 {
  background-color: $colorRibbon9;
  color: $colorRibbonFont9;
  border-color: $colorRibbonBorder9;
}