.make-label(@color: #f0f) {
  @label: escape('<svg xmlns="http://www.w3.org/2000/svg" width="130" height="69"><path d="M130,0H0V58S25,70,55,69s46-19,75-19V0Z" style="fill:@{color}"/></svg>');
  background-image: url(~'data:image/svg+xml,@{label}');
}

.faden-mono {

  color: @gray;
  .highlight {
    color: @color-mono;
  }

}

.faden-screw {
  color: @gray;
  .highlight {
    color: @color-screw;
  }
}

.faden-volume {
  color: @gray;
  .highlight {
    color: @color-volume;
  }
}

.faden-barb {
  color: @gray;
  .highlight {
    color: @color-barb;
  }
}


.label-mono, .label-screw, .label-volume, .label-barb {
  position: relative;
  color: #fff;
  font-weight: 400;
  z-index: 2;
  text-align: center;
  width: 130px;

  line-height: 59px;
  padding-bottom: 10px;
  display: block;
  &:before {
    content: '';
    display: block;
    top:0;
    left: 0;
    width: 130px;
    height: 69px;
    position: absolute;
    z-index: -1;
  }


}

.label-mono:before {
  .make-label(@color-mono)
}

.label-screw:before {
  .make-label(@color-screw)
}

.label-volume:before {
  .make-label(@color-volume)
}

.label-barb:before {
  .make-label(@color-barb)
}
