sections.css

/* Define this only once, you can rename 'section' to any supertag you want to style */

.listContentItem:has(span[data-tag="section"]) .inlinerefnode span {
    background-color: inherit !important;
    color: white;
    border: none;
}

/* 
  Per specific reference inside the supertag, you can define different colors.
  You will need to replace REFERENCE with the reference you want define the color for.
*/
.listContentItem:has(span[data-tag="section"]) span[data-role="editable"]:has(span[data-inlineref-node="REFERENCE"]) { 
    background-color: #12537A !important;
    padding: 3px 7px;
    line-height: 2em;
    border-radius: 3px;  
    color: white;
    border: none;
    margin-right: 2px;
}   

.navtarget:has(span[data-inlineref-node="REFERENCE"]) > span { 
    background-color: #12537A !important;
    padding: 0px 7px;
    line-height: 2em;
    border-radius: 3px;  
    color: white;
    border: none;
    margin-right: 2px;
}

.navtarget:has(span[data-inlineref-node="REFERENCE"]) .inlinerefnode span {
    background-color: inherit !important;
    color: white;
    border: none;
}