.ribbon{
    --color-ribbon : #fff;
    @apply block;
    span{
    position: relative;
    bottom: 0;
    left: 0;
    padding: .75em 1.25em .75em .75em;
    margin-left: -.5em;
    margin-right: -.5em;
    background-color: var(--color-ribbon);
    box-shadow: inset 0 .062em 0 var(--color-ribbon), 0 .125em .25em rgba(0, 0, 0, .2);
    color: black;
    box-shadow: 0 0 16px var(--color-ribbon);
    text-shadow: 0 -.062em 0 rgba(0, 0, 0, .2);
    text-align: center;
    display: block;
    border-radius: 0 .5em 0 .5em;
    word-wrap: break-word;
    }
  
    span:before{
      content: "";
    position: absolute;
    top: -1em;
    left: 0;
    width: .5em;
    height: 3em;
    border-radius: .5em 0 0 .5em;
    background-color: var(--color-ribbon);
    z-index: -1;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.4) 100%);
    }
  
    span:after{
      content: "";
    position: absolute;
    top: 1em;
    right: 0em;
    width: .5em;
    height: 3em;
    border-radius: 0 .5em .5em 0;
    background-color: var(--color-ribbon);
    z-index: -1;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.4) 100%);
    }
  
  }

.ribbon-druid{
    --color-ribbon : var(--color-druid)
}

.ribbon-deathknight{
    --color-ribbon : var(--color-deathknight)
}

.ribbon-demonhunter{
    --color-ribbon : var(--color-demonhunter)
}