[data-role="badge"] { 
    position:absolute;
    /* display:inline-block; */
    right:1em;
    line-height:1.2;
    vertical-align:middle;
    border-radius:10px;
    border:1px solid;
    text-align:center;
    min-width:20px;
    height:20px;
    padding:0;
    box-shadow:var(--cavelo-black) 0px 0px 20px 0px;
    box-sizing:border-box;

    display:flex;
    align-items:center;
    align-content:center;
    justify-content:center;

}
[data-role="badge"] > span {
    top:0;
    font-size:1em;
    height:20px;
    line-height:1.2;
    display:inline-block;
    vertical-align:middle;
    font-weight:bold;
    text-align:center;
    color:inherit;
    padding:0;
    margin:0;
    box-sizing:border-box;

    display:flex;
    align-items:center;
    align-content:center;
    justify-content:center;

}

/* badge - colors */
[data-role="badge"].green { border-color: var(--cavelo-green); background:var(--cavelo-green-60); color:var(--cavelo-white); }
[data-role="badge"].orange { border-color: var(--cavelo-orange); background:var(--cavelo-orange-60); color:var(--cavelo-white); }
[data-role="badge"].navy { border-color: var(--cavelo-navy); background:var(--cavelo-navy-60); color:var(--cavelo-white); }
[data-role="badge"].blue { border-color: var(--cavelo-blue); background:var(--cavelo-blue-60); color:var(--cavelo-white); }
[data-role="badge"].white { border-color: var(--cavelo-white); background:var(--cavelo-white); color:var(--cavelo-black); }
[data-role="badge"].black { border-color: var(--cavelo-black); background:var(--cavelo-black-60); color:var(--cavelo-white); }
[data-role="badge"].grey { border-color: var(--cavelo-platinum); background:var(--cavelo-platinum-60); color:var(--cavelo-grey); }
/*!!V2*/
[data-role="badge"].gold { border-color: var(--cv-gold-100); background:var(--cv-gold-75); color:var(--cavelo-white); }
[data-role="badge"].bright-blue { border-color: var(--cv-bright-blue-100); background:var(--cv-bright-blue-75); color:var(--cavelo-white); }
[data-role="badge"].vivid-blue { border-color: var(--cv-vivid-blue-100); background:var(--cv-vivid-blue-75); color:var(--cavelo-white); }
[data-role="badge"].vivid-cyan { border-color: var(--cv-vivid-cyan-100); background:var(--cv-vivid-cyan-75); color:var(--cavelo-white); }
[data-role="badge"].red { border:1px solid var(--cv-accent-red-dark); background-color:var(--cv-accent-red-light); color:var(--cavelo-white); }
/*!!V2*/

/* badge - inverse colors */
[data-role="badge"].inverse.green { border-color: var(--cavelo-green); color:var(--cavelo-green); background:var(--cavelo-white); }
[data-role="badge"].inverse.orange { border-color: var(--cavelo-orange); color:var(--cavelo-orange); background:var(--cavelo-white); }
[data-role="badge"].inverse.navy { border-color: var(--cavelo-navy); color:var(--cavelo-navy); background:var(--cavelo-white); }
[data-role="badge"].inverse.blue { border-color: var(--cavelo-blue); color:var(--cavelo-blue); background:var(--cavelo-white); }
[data-role="badge"].inverse.white { border-color: var(--cavelo-white); color:var(--cavelo-black); background:var(--cavelo-white); }
[data-role="badge"].inverse.black { border-color: var(--cavelo-black); color:var(--cavelo-black); background:var(--cavelo-white); }
[data-role="badge"].inverse.grey { border-color: var(--cavelo-platinum); color:var(--cavelo-black); background:var(--cavelo-white); }

[data-role="badge"].inverse.gold { border-color:solid var(--cv-gold); color:var(--cv-gold); background:var(--cavelo-white); }
[data-role="badge"].inverse.bright-blue { border-color: var(--cv-bright-blue); color:var(--cv-bright-blue); background:var(--cavelo-white); }
[data-role="badge"].inverse.vivid-blue { border-color: var(--cv-vivid-blue); color:var(--cv-vivid-blue); background:var(--cavelo-white); }
[data-role="badge"].inverse.vivid-cyan { border-color: var(--cv-vivid-cyan); color:var(--cv-vivid-cyan); background:var(--cavelo-white); }
[data-role="badge"].inverse.red { border-color: var(--cv-accent-red-dark); color:var(--cv-accent-red-dark); background:var(--cavelo-white); }

/* badge - sizes */
[data-role="badge"].large,
.large [data-role="badge"] { padding:0.8em 1em; font-size:1em; }
[data-role="badge"].medium,
.medium [data-role="badge"] { padding:0.6em 0.8em; font-size:0.9em; }
[data-role="badge"].small,
.small [data-role="badge"] { padding:0.2em 0.6em; font-size:0.8em; }


#cavelo-menu a > [data-role="badge"] { position:absolute; right:1em; margin-right:0; top:50%; transform: translate(0, -50%); }
#cavelo-menu.small a > [data-role="badge"] { position:absolute; right:0; margin-right:0; top:0; transform: translate(-2%, -30%); box-shadow: var(--box-shadow); }
#cavelo-menu.small a > [data-role="badge"]:empty { display:none; }

[data-role="badge"].inline { 
    position:relative; left:auto; right:auto; top:auto; bottom:auto; 
    padding:0.1em; max-width:fit-content; max-height:fit-content;
    border-radius:1em;
    display:inline-flex;
    align-items:center;
    align-content:center;
    justify-content:center;
}
[data-role="badge"].inline span {
    position:
    relative;
    left:
    auto;
    right:
    auto;
    top:
    auto;
    bottom:
    auto;
    min-height:
    fit-content;
    max-height:
    fit-content;
    min-width:
    fit-content;
    max-width:
    fit-content;
    padding:0 0.3em 0 0.3em;
    display:
    inline-flex;
    align-items:
    center;
    align-content:
    center;
    justify-content:
    center;
    flex-wrap: nowrap;
    white-space: nowrap;
}