Template:Def/styles.css

/* Template:def/styles.css
Namespace: sv-def only
*/

.sv-def{
display:inline-flex;
align-items:baseline;
vertical-align:baseline;
line-height:inherit;
white-space:nowrap;
gap:0.35em;
cursor:help;
}

.sv-def-icon,
.sv-def-icon-img{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}

.sv-def-icon-img img{
height:1em;
width:auto;
display:block;
}

.sv-def-icon--missing{
width:1em;
height:1em;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:0.78em;
line-height:1;
border:1px solid currentColor;
background:transparent;
color:currentColor;
}

/* Text behaves like normal prose by default, but becomes link-like on hover.
Supports BOTH shapes:
1) <a class="sv-def-text">
2) <span class="sv-def-text"><a>
*/

.sv-def-text{
color:inherit;
border-bottom:none;
text-decoration:none;
}

.sv-def a.sv-def-text,
.sv-def .sv-def-text a{
color:inherit;
border-bottom:none;
text-decoration:none;
}

.sv-def:hover .sv-def-text,
.sv-def:hover a.sv-def-text,
.sv-def:hover .sv-def-text a{
color:var(--color-link, currentColor);
border-bottom:1px dotted currentColor;
text-decoration:none;
}

.sv-def--missing,
.sv-def--error{
cursor:not-allowed;
opacity:0.90;
}