MetaPhase-Consulting/State-TalentMAP

$ribbon-shadow-color: rgba(112, 112, 112, .5);

.ribbon {
  color: $color-black;
  display: flex;
  font-family: 'Merriweather';
  font-size: 1.3rem;
  font-weight: bold;
  justify-content: center;
  padding-bottom: 5px;
  padding-top: 6px;

  .fa {
    font-size: 1.6rem;
    margin-right: .25em;
    margin-top: 1px;
  }

  .text {
    margin-top: .12em;
  }
}

.ribbon-primary {
  background-color: $tertiary-gold-lighter;
}

.ribbon-secondary {
  background-color: $blue-primary-darkest;
  color: $color-white;
}

.ribbon-tertiary {
  background-color: $primary-alt-lightest;
}

.ribbon-success {
  background-color: $tertiary-success-lightest;
}

.ribbon-hds {
  background-color: $ribbon-hds;
}

.ribbon-cn {
  background-color: $secondary-light;
}

.ribbon-snd {
  background-color: $tertiary-success-lighter;
}

.ribbon-availTeleworkPos {
  background-color: $color-gold-dark;
}

.ribbon-htf {
  background-color: $color-purple-medium;
}

.ribbon-outer-container-cut-left {
  box-shadow: 3px 4px 4px -4px $ribbon-shadow-color;
  margin-bottom: 2px;
}

.ribbon-outer-container-cut-right {
  box-shadow: -3px 4px 4px -4px $ribbon-shadow-color;
}

.ribbon-outer-container-cut-both {
  box-shadow: 0 4px 4px -4px $ribbon-shadow-color;
}

.ribbon-cut-left {
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  padding-left: 1em;
  padding-right: .35em;
}

.ribbon-cut-right {
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%, 0 100%);
  padding-left: .5em;
  padding-right: 1em;
}

.ribbon-cut-both {
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%, 0 100%);
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.ribbon-container {
  position: absolute;
  right: -1px;
  top: 55px;
  width: 170px;

  .ribbon-snd {
    font-size: 10px;
    float: right;
  }
}

.ribbon-results-card {
  float: right;
}

.ribbon-condensed-card {
  width: 35px;
}

.ribbon-wide {
  min-width: 150px;

  .ribbon-cut-left {
    padding-left: 2em;
  }

  .ribbon-cut-right {
    padding-left: 1.5em;
  }
}

.ribbon-wide-results {
  min-width: 163.05px;
}