.exprd{
  display:inline-block;
  vertical-align:middle;
  margin:1px;
  width:32px;

  box-sizing:border-box;
  border:2px solid var(--exprd-border);
  border-radius:5px;
  background: var(--exprd-bg);
  padding:0;
  overflow:hidden;
}

.exprd__bar{
  display:block;
  height:8px;
  width:var(--level, 0px);
  background: var(--exprd-fill);
  border-radius:5px;
}

/* overflow: sfuma verso "fill scurito" in base a --ovp (percentuale) */
.exprd-overflow .exprd__bar{
  /* fallback se color-mix non esiste */
  background: linear-gradient(to right, var(--exprd-fill) 60%, var(--exprd-fill-dark) 100%);
}

/* se supportato: scurisce in proporzione */
@supports (color: color-mix(in srgb, black, white)) {
  .exprd-overflow .exprd__bar{
    /* --ovp è una percentuale (es. 0%..60%) */
    background: linear-gradient(
      to right,
      var(--exprd-fill) 0%,
      color-mix(in srgb, var(--exprd-fill) calc(100% - var(--ovp, 0%)), black var(--ovp, 0%)) 100%
    );
  }
}

/* scaduto → pallino */
.exprd-expired{
  width:10px;
  border-radius:999px;
}
.exprd-expired .exprd__bar{
  width:8px;
}

/*
  Pulse precedente (commentato):
  - scala il punto e aggiunge un bagliore con box-shadow
  - risulta più "visibile" ma anche più invasivo
@keyframes exprd-pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255, 47, 47, 0.45); }
  70%  { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255, 47, 47, 0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255, 47, 47, 0); }
}
*/
/* @keyframes exprd-pulse {
  0%   { transform: scale(0.7); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(0.7); }
} */
/* @keyframes exprd-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
} */
@keyframes exprd-pulse {
  0%, 25%   { opacity: 1; }
  50%, 75%  { opacity: 0; }
  100% { opacity: 1; }
}

.exprd-expired.exprd-pulse{
  animation: exprd-pulse 1.2s ease-in-out infinite;
}



/* palette */
.exprd-green{
  --exprd-fill:        #33bb33;
  --exprd-fill-dark:   #228822;   /* fallback (se niente color-mix) */
  --exprd-bg:          #33bb3322;
  --exprd-border:      #33bb3399;
}

.exprd-amber{
  --exprd-fill:        #ffaa00;
  --exprd-fill-dark:   #cc8800;
  --exprd-bg:          #ffaa0022;
  --exprd-border:      #ffaa00ff;
}

.exprd-red{
  --exprd-fill:        #ff2f2f;
  --exprd-fill-dark:   #aa0e0e;
  --exprd-bg:          #ff2f2f22;
  --exprd-border:      #ff2f2fff;
}