ribbon.less

.ribbon {
  font-size: 16px !important;
  width: 50%;
  position: relative;
  background: @brand-primary;
  color: #fff;
  text-align: center;
  padding: 1em 2em;
  margin: 0 auto;

  &:before, &:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.9em solid darken(@brand-primary, 10%);
    z-index: -1;
  }

  &:before {
    left: -2.37em;
    border-right-width: 1.5em;
    border-left-color: transparent;
  }

  &:after {
    right: -2.37em;
    border-left-width: 1.5em;
    border-right-color: transparent;
  }

  &.hide-edges:before, &.hide-edges:after {
    display: none;
  }

  .ribbon-content {
    font-size: @ribbon-content-font-size;
    &:before, &:after {
      content: "";
      position: absolute;
      display: block;
      border-style: solid;
      border-color: darken(@brand-primary, 20%) transparent transparent transparent;
      bottom: -1em;
    }

    &:before {
      left: 0;
      border-width: 1em 0 0 1em;
    }

    &:after {
      right: 0;
      border-width: 1em 1em 0 0;
    }
  }
}