x-badge {
  display:inline-flex;
  gap:3px;
  align-items:center;
  background: var(--background);
  color: var(--code);
  padding: 2.5px 5px;
  border-radius: 6px;
  font-size: 11px;
  font-family: monospace;
  &[type='ass'] { 
    color:lightcoral;
    background:lavenderblush;
    &::after { content: "da assegnare"; }
  }
  &[type='percentage'] { 
    font-size:.75em;
    &.good {background:#90ee905e; color: green;}
    &.avg {background:hsl(42, 100%, 52.9%); color: #3f2d01;}
    &.bad {background:pink;color:maroon;}
  }
  &[type='tariff'] {
    font-weight:normal;
    padding: 1px 2px;
    gap:1px;
    &.rw { background:var(--gapmed-light-blue); color:aliceblue; }
    &.c { background: lavenderblush; color:purple; border:1px solid pink;}
  }
}
h3 x-badge {font-size:inherit;}
x-pop {
  display:inline-flex;
  align-items:center;
  h3 { margin:3px 0; }
  div[popover]:popover-open {
    width: 300px;
    max-height:50vh;
    overflow-y:scroll;
    padding: 10px 15px;
    border:1px solid #ccc;
    border-radius: 10px;
  }
  div[popover]::backdrop { backdrop-filter: blur(3px); }
}