/* ==========================================================================
   ATOMS / badge / badge.css
   --------------------------------------------------------------------------
   VARIANTS:  default, brand, success, warning, error, info
   MODIFIERS: dot (no text), outline, pill
   SIZES:     sm, md (default)

   HTML PATTERN:
     <span class="badge badge-success">Active</span>
     <span class="badge badge-error badge-dot"></span>
     <span class="badge badge-warning badge-outline">Pending</span>
   ========================================================================== */

.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--size-100);
  padding:        var(--size-50) var(--size-300);   /* 2px 12px */
  font-size:      var(--text-label-sm-size);        /* 12px */
  font-weight:    var(--font-weight-medium);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-wide);
  white-space:    nowrap;
  border-radius:  var(--radius-md);
  border:         1px solid transparent;
  vertical-align: middle;
}

/* DEFAULT (neutral) */
.badge {
  background-color: var(--color-bg-sunken);
  color:            var(--color-text-secondary);
  border-color:     var(--color-border-default);
}

/* BRAND */
.badge-brand {
  background-color: var(--color-brand-subtle);
  color:            var(--color-brand-text);
  border-color:     transparent;
}

/* SEMANTIC */
.badge-success {
  background-color: var(--color-success-subtle);
  color:            var(--color-success-text);
  border-color:     transparent;
}
.badge-warning {
  background-color: var(--color-warning-subtle);
  color:            var(--color-warning-text);
  border-color:     transparent;
}
.badge-error {
  background-color: var(--color-error-subtle);
  color:            var(--color-error-text);
  border-color:     transparent;
}
.badge-info {
  background-color: var(--color-info-subtle);
  color:            var(--color-info-text);
  border-color:     transparent;
}

/* OUTLINE variants */
.badge-outline         { background-color: transparent; border-color: var(--color-border-strong); }
.badge-brand.badge-outline   { border-color: var(--color-brand); }
.badge-success.badge-outline { border-color: var(--color-success-border); }
.badge-warning.badge-outline { border-color: var(--color-warning-border); }
.badge-error.badge-outline   { border-color: var(--color-error-border); }
.badge-info.badge-outline    { border-color: var(--color-info-border); }

/* FILLED (solid background) */
.badge-filled-brand   { background-color: var(--color-brand);   color: white; }
.badge-filled-success { background-color: var(--color-success); color: white; }
.badge-filled-error   { background-color: var(--color-error);   color: white; }
.badge-filled-warning { background-color: var(--color-warning); color: var(--gray-900); }

/* PILL */
.badge-pill { border-radius: var(--radius-full); }

/* SM */
.badge-sm {
  padding:   2px var(--size-200);
  font-size: var(--font-size-50);   /* 8px */
}

/* DOT — hanya lingkaran berwarna, tidak ada teks */
.badge-dot {
  width:          8px;
  height:         8px;
  padding:        0;
  border-radius:  var(--radius-full);
  background-color: var(--color-text-disabled);
}
.badge-dot.badge-success { background-color: var(--color-success); }
.badge-dot.badge-warning { background-color: var(--color-warning); }
.badge-dot.badge-error   { background-color: var(--color-error); }
.badge-dot.badge-info    { background-color: var(--color-info); }
.badge-dot.badge-brand   { background-color: var(--color-brand); }

/* Notification counter (angka di atas ikon) */
.badge-count {
  position:        absolute;
  top:             -4px;
  right:           -4px;
  min-width:       18px;
  height:          18px;
  padding-inline:  var(--size-100);
  background-color: var(--color-error);
  color:            white;
  font-size:        10px;
  font-weight:      var(--font-weight-bold);
  border-radius:    var(--radius-full);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border:           2px solid var(--color-bg-base);
  line-height:      1;
}