.badge { 
  
  div.counter:not([data-nb-unread="0"]) {
    display: block;
    border-radius: 50%;
    font-size: 11px;
    height: 18px;
    width: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 18px;
    color: var(--color-heading);
    background: var(--color-third);
    
    &.color-primary {
      background: white;
      border: 1px solid var(--color-primary);
      color: var(--color-primary);
    }
    &.color-secondary {
      background: white;
      border: 1px solid var(--color-secondary);
      color: var(--color-secondary);
    }
    &.color-third {
      background: white;
      border: 1px solid var(--color-third);
      color: var(--color-third);
    }
    &.color-heading {
      background: white;
      border: 1px solid var(--color-heading);
      color: var(--color-heading);
    }
    &.reversed {
      &.color-primary {
        background: var(--color-primary);
        border: 1px solid var(--color-primary);
        color: white;
      }
      &.color-secondary {
        background: var(--color-secondary);
        border: 1px solid var(--color-secondary);
        color: white;
      }
      &.color-third {
        background: var(--color-third);
        border: 1px solid var(--color-third);
        color: white;
      }
      &.color-heading {
        background: var(--color-heading);
        border: 1px solid var(--color-heading);
        color: white;
      }
    }
  }
}