xmc/modular/unread.css

[class^="listItem_"]:hover [class^="pill_"] {
  display: none;
}
[class^="listItem_"] [class^="pill_"] {
  width: 52px !important;
  height: 56px !important;
  top: -4px !important;
  left: 11px;
  z-index: 100;
}
[class^="listItem_"] [class^="pill_"] > span {
  display: none;
}
[class^="listItem_"] [class^="pill_"] > span[style*="height: 8px;"] {
  display: block;
  left: 4px;
  bottom: 2px;
  height: 12px !important;
  width: 12px !important;
  border-radius: 100% !important;
  transform: none !important;
  z-index: 100;
  background: var(--red, var(--status-red-500));
}
[class^="listItem_"] [class^="pill_"] > span[style*="height: 40px;"] {
  display: block;
  background: transparent;
  height: 46px !important;
  width: 46px !important;
  right: 4px;
  top: 5px !important;
  border-radius: 10% !important;
  box-shadow: 0 0 0 2.5px var(--accent, var(--brand-500));
  z-index: 100;
}

[class^="listItem_"]:hover [class^="pill_"] span {
  opacity: 0 !important;
}

[class^="listItem_"]:not(:hover) [class^="pill_"] span {
  opacity: 0 !important;
}
[class^="listItem_"]:not(:hover) [class^="pill_"] span[style^="opacity: 0.7"],
[class^="listItem_"]:not(:hover) [class^="pill_"] span[style^="opacity: 1"] {
  opacity: 1 !important;
}

[class^="listItem_"] [class^="upperBadge_"] {
  z-index: 500;
}