[data-role="tag"] {
    position:relative;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius:1em;

    padding:0.1em 0.4em 0.1em 0.4em; 
    border:1px solid var(--cavelo-grey);
    margin:1px;

    min-height:1.5em !important;
    min-width:1.5em !important;

    display:inline-flex;
    justify-content: center;
    align-content: baseline;
    align-items: baseline;
    flex-wrap: nowrap;
    flex-direction: row;
    line-height:normal;

}
[data-role="tag"] > * { position:relative; }
[data-role="tag"] > span:not([class]) { width:1em; }

[data-role="tag"].cve { 
    font-weight:bold;
    border:1px solid var(--cavelo-grey);
    background-color:var(--cavelo-white);
    color:var(--cavelo-black);
}

[data-role="tag"].pii { 
    font-weight:bold;
    border:1px solid var(--cavelo-orange);
    background-color:var(--very-high-20);
    /* background-color:var(--cavelo-orange-20); */
    color:var(--cavelo-black);
}
[data-role="tag"].msip { 
    font-weight:bold;
    /* border:1px solid var(--cavelo-green); */
    /* background-color:var(--low-20); */
    border:1px solid var(--cavelo-blue);
    background-color:var(--very-low-20);
    color:var(--cavelo-black);
}

[data-role="tag"].green { 
    font-weight:bold;
    border:1px solid var(--low-100);
    background-color:var(--low-20);
    color:var(--cavelo-black);
}
[data-role="tag"].orange { 
    font-weight:bold;
    border:1px solid var(--very-high-100);
    background-color:var(--very-high-20);
    color:var(--cavelo-black);
}
[data-role="tag"].gold { 
    font-weight:bold;
    border:1px solid var(--medium-100);
    background-color:var(--medium-20);
    color:var(--cavelo-black);
}
[data-role="tag"].red { 
    font-weight:bold;
    border:1px solid var(--cv-accent-red-medium);
    background-color:var(--cv-accent-red-light);
    color:var(--cavelo-black);
}


[data-role="tag"].none,
[data-role="tag"].custom { 
    font-weight:bold;
    border:1px solid var(--cavelo-blue);
    background-color:var(--very-low-20);
    color:var(--cavelo-black);
}

[data-role="tag"].none { cursor:pointer; }

[data-role="tag"].small { font-size:0.8em; }
[data-role="tag"].medium { font-size:1em; }
[data-role="tag"].large { font-size:1.2em; }


/* [data-role="tag"].pii .search {  } */
[data-role="tag"] .search > i { display:block; height:100%; width:100%; }
[data-role="tag"] .search:not(.visible) { display:none; }
[data-role="tag"] .search.visible { display:inline-block; width:1em; }




[data-role="tag"].custom { white-space:nowrap; }
[data-role="tag"].custom.removable:hover { 
    border-right-color:transparent; 
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    box-shadow:var(--box-shadow);
    transform:scale(1.2) translateX(-0.5em);
    z-index:5;
}
[data-role="tag"].custom.removable:hover .show-on-hover,
[data-role="tag"].custom.removable:hover .show-on-hover:hover {
    position:absolute;
    display:flex;
    align-items:center;
    align-content:center;
    height:calc(100% + 2px);
    z-index:3;
    top:0;
    right:0;
    padding-left:0.1em;
    padding-right:0.3em;
    transform:translate(calc(1.2em - 1px), -1px);
    background:inherit;
    border:1px solid var(--cavelo-blue);
    border-left-width:0;
    border-top-right-radius:1em;
    border-bottom-right-radius:1em;
    justify-content: center;
}



/* [data-role="tag"].pii:has(.search):hover {  */
[data-role="tag"].searchable:hover { 
    border-left-color:transparent; 
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    box-shadow:var(--box-shadow);
    transform:scale(1.2) translateX(0.5em);
    z-index:5;
}
[data-role="tag"]:hover .search,
[data-role="tag"]:hover .search:hover {
    position:absolute;
    display:flex;
    align-items:center;
    align-content:center;
    height:calc(100% + 2px);
    z-index:3;
    top:0;
    left:0;
    padding-left:0.3em;
    padding-right:0.1em;
    transform:translate(-1.2em, -1px);
    background:inherit;
    border-width:1px;
    border-style:solid;
    border-color:inherit;
    border-right-width:0;
    border-left-width:1px;
    border-top-left-radius:1em;
    border-bottom-left-radius:1em;
    justify-content: center;
}

[data-role="tag"]:hover .search:hover { 
    color:var(--cavelo-orange); 
    cursor:pointer; 
}

[data-role="tag"].pii:hover .search,
[data-role="tag"].pii:hover .search:hover { 
    border-color:var(--cavelo-orange); 
}

[data-role="tag"].cve:hover .search,
[data-role="tag"].cve:hover .search:hover { 
    border-color:var(--cavelo-grey);
}


td.cv-tagging-cell {
    vertical-align:middle;
}



[data-role="tag"].pii > .badge-name:not(:empty):not(.hidden) + .badge-count { margin-left:0.5em; }
[data-role="tag"].pii > .search { display:none; }
[data-role="tag"].pii:hover > .search { display:inline-flex; margin-right:0.5em }


[data-role="tag"].add-new-tag { 
    /* display:none;  */
    position:absolute;
    transition:color 0.3s; 
    opacity:0;
}
*:hover > [data-role="tag"].add-new-tag { 
    /* display:inline-block;  */
    position:absolute;
    opacity:1;
}
[data-role="tag"].add-new-tag.clickable.custom:hover { 
    /* transform:scale(1.1) !important; */
    color:var(--cavelo-orange); 
    cursor:pointer; 
}


.selected-tags.tags:empty:before { content:'No tags selected'; opacity:0.6; }
.available-tags.tags:empty:before { content:'No tags available'; opacity:0.6; }



[data-role="tag"][class*="risk-"] { border-color:var(--border-color); background-color:var(--background-color); color:var(--font-color); }
[data-role="tag"].risk-very-high { --border-color:var(--very-high-100); --background-color:var(--very-high-60); --font-color:var(--cavelo-black); }
[data-role="tag"].risk-high      { --border-color:var(--high-100); --background-color:var(--high-60); --font-color:var(--cavelo-black); }
[data-role="tag"].risk-medium    { --border-color:var(--medium-100); --background-color:var(--medium-60); --font-color:var(--cavelo-black); }
[data-role="tag"].risk-low       { --border-color:var(--low-100); --background-color:var(--low-60); --font-color:var(--cavelo-black); }
[data-role="tag"].risk-very-low  { --border-color:var(--very-low-100); --background-color:var(--very-low-60); --font-color:var(--cavelo-black); }
[data-role="tag"].risk-none      { --border-color:var(--cv-black-25); --background-color:var(--cv-black-0); --font-color:var(--cavelo-black); }




/** NEW TAGGING */
.add-tag-menu { position:absolute; z-index:100; }

[data-role="tagging"] {
    position:relative;
    display:inline-flex;
    font-size:0.8rem;
    margin:1px;
    padding:0.1em 0.4em;
    border:1px solid var(--cavelo-platinum);
    border-radius:1em;
    align-items:center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}
[data-role="tagging"] > .tag-label {
    position:relative;
    display:inline-block;
    cursor: auto;
}
[data-role="tagging"] > .tag-remove {
    position:relative;
    display:inline-block;
    margin-left:0.2em;
    padding:0 0.2em;
    cursor: pointer;
}

/* Deleter */
[data-role="tagging"]:not(:hover) > .tag-remove { display:none; }
[data-role="tagging"]:hover > .tag-remove:hover { transform:scale(1.4); color:var(--cavelo-orange) }

/* Color */
[data-role="tagging"].pii { background-color:var(--very-high-20); border-color:var(--very-high-100); }
[data-role="tagging"].msip { background-color:var(--high-20); border-color:var(--high-60); }
[data-role="tagging"].agent { background-color:var(--very-low-20); border-color:var(--very-low-100); }
[data-role="tagging"].cloudconnector { background-color:var(--very-low-20); border-color:var(--very-low-100); }
[data-role="tagging"].networkasset { background-color:var(--cavelo-platinum); border-color:var(--cavelo-grey); }
[data-role="tagging"].inventory { background-color:var(--low-20); border-color:var(--low-100); }

/* Icons */
[data-role="tagging"] > .tag-label::before { font-family: "Font Awesome 6 Free"; font-size:0.7rem; font-weight: 600; margin-right:0.4em; }
[data-role="tagging"].pii > .tag-label::before { content:"\f3e0"; }
[data-role="tagging"].msip > .tag-label::before { content:"\f3ed"; }
[data-role="tagging"].agent > .tag-label::before { content:"\e4e5"; }
[data-role="tagging"].cloudconnector > .tag-label::before { content:"\f0c2"; }
[data-role="tagging"].networkasset > .tag-label::before { content:"\f0a0"; }
[data-role="tagging"].inventory > .tag-label::before { content:"\f15b"; }




[data-role="tag"].nostretch { 
    max-width:fit-content !important; 
    max-height:fit-content !important; 
}