:root
{
 --component-badge-text-shadow:1px 1px 1px #000;
 --component-badge-label-background:#5C5C5C;
 --component-badge-label-text:#FFF;
 --component-badge-content-background:#6FC146;
 --component-badge-content-text:#FFF;
 --component-badge-border-radius:var(--UI-small-border-radius);
 --component-badge-font-size:0.5rem;
 --component-badge-line-height:1;
 --component-badge-padding:0.5em
}

.VLBadge
{
 vertical-align:middle
}

/* TODO : find out why this is needed */
.badges > .VLBadge
{
 margin:0 0 0 0.5em
}

.VLBadgeFallback
{
 font-family:arial;
 font-size:var(--component-badge-font-size);
 line-height:var(--component-badge-line-height);
 padding:0;
 margin:0;
 display:inline-block
}

.VLBadgeFallback > span
{
 padding:var(--component-badge-padding);
 display:inline-block;
 text-shadow:var(--component-badge-text-shadow)
}

.VLBadgeFallback > :first-child
{
 background-color:var(--component-badge-label-background);
 color:var(--component-badge-label-text);
 border-top-left-radius:var(--component-badge-border-radius);
 border-bottom-left-radius:var(--component-badge-border-radius)
}

.VLBadgeFallback > :last-child
{
 background-color:var(--component-badge-content-background);
 color:var(--component-badge-content-text);
 border-top-right-radius:var(--component-badge-border-radius);
 border-bottom-right-radius:var(--component-badge-border-radius)
}