[data-role="status"] { position:relative; display:inline-block; height:fit-content; overflow:visible; vertical-align:top; }
[data-role="status"] > i {position:relative;display:inline-block;border-radius:1em;height:1em;width:1em;margin-right:0.5em;top:1px;}
[data-role="status"] > span {display:inline-block;height:1em;vertical-align: middle;}
[data-role="status"] > span.hidden { display:none; }

/* _grey */
[data-role="status"] > i,
[data-role="status"] > i.obsolete,
[data-role="status"] > i.pending,
[data-role="status"] > i.closed,
[data-role="status"] > i.disabled,
[data-role="status"] > i.undeployed {
    border:1px solid var(--cavelo-grey);
    background-color:var(--cavelo-platinum);
    color:var(--cavelo-black);
}
/* _green */
[data-role="status"] > i.active,
[data-role="status"] > i.read,
[data-role="status"] > i.low,
[data-role="status"] > i.enabled,
[data-role="status"] > i.completed,
[data-role="status"] > i.success,
[data-role="status"] > i.online,
[data-role="status"] > i.healthy {
    border:1px solid var(--cavelo-green);
    background-color:var(--cavelo-green-20);
    color:var(--cavelo-green);
}
/* _orange */
[data-role="status"] > i.medium,
[data-role="status"] > i.running,
[data-role="status"] > i.warning,
[data-role="status"] > i.high {
    border:1px solid var(--cv-gold-dark);
    background-color:var(--cv-gold-light);
    color:var(--cv-gold-dark);
}
/* _red */
[data-role="status"] > i.inactive,
[data-role="status"] > i.new,
[data-role="status"] > i.critical,
/* [data-role="status"] > i.disabled, */
[data-role="status"] > i.partial,
[data-role="status"] > i.failure,
[data-role="status"] > i.internalerror,
[data-role="status"] > i.offline,
[data-role="status"] > i.errors,
[data-role="status"] > i.danger {
    border:1px solid var(--cv-accent-red-dark);
    background-color:var(--cv-accent-red-light);
    color:var(--cv-accent-red-dark);
}

[data-role="status"].small > i { height:0.6em; width:0.6em; }
[data-role="status"].medium > i { height:0.8em; width:0.8em; }
[data-role="status"].large > i { height:1em; width:1em; }


div.status-count { margin-bottom:2px; }
div.status-count * { vertical-align:middle; }
div.status-count > [data-role="status"] > i { height:1.3em; width:1.3em; padding:2px 1px 0px 1px; text-align:center; font-style:normal; font-weight:bold; }


[data-role="status"] > i.warning + span { color:var(--cv-gold-dark); }
[data-role="status"] > i.danger + span { color:var(--cv-accent-red-dark); }