/* ==========================================================
   BADGE
   Candy UI Kit
========================================================== */

.badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 24px;

  padding: 0 10px;

  border: 2px solid transparent;

  border-radius: 999px;

  font-family: inherit;

  font-size: var(--font-size-xs);

  font-weight: 600;

  line-height: 1;

  white-space: nowrap;
}

/* ==========================================================
   ICON
========================================================== */

.badge__icon {
  width: 14px;
  height: 14px;

  display: block;

  flex-shrink: 0;

  object-fit: contain;
}

/* ==========================================================
   DOT
========================================================== */

.badge__dot {
  width: 7px;
  height: 7px;

  flex-shrink: 0;

  border-radius: 50%;

  background: currentColor;
}

/* ==========================================================
   DEFAULT
========================================================== */

.badge--default {
  color: var(--text);

  background: #f0ebe4;

  border-color: var(--border-strong);
}

/* ==========================================================
   PRIMARY
========================================================== */

.badge--primary {
  color: #ffffff;

  background: var(--primary);

  border-color: var(--primary);
}

/* ==========================================================
   SECONDARY
========================================================== */

.badge--secondary {
  color: #ffffff;

  background: var(--secondary);

  border-color: var(--secondary);
}

/* ==========================================================
   SUCCESS
========================================================== */

.badge--success {
  color: #ffffff;

  background: var(--success);

  border-color: var(--success);
}

/* ==========================================================
   WARNING
========================================================== */

.badge--warning {
  color: #ffffff;

  background: var(--warning);

  border-color: var(--warning);
}

/* ==========================================================
   DANGER
========================================================== */

.badge--danger {
  color: #ffffff;

  background: var(--danger);

  border-color: var(--danger);
}

/* ==========================================================
   ICON COLOR
========================================================== */

.badge--primary .badge__icon,
.badge--secondary .badge__icon,
.badge--success .badge__icon,
.badge--warning .badge__icon,
.badge--danger .badge__icon {
  filter: brightness(0) invert(1);
}

/* ==========================================================
   DEFAULT ICON
========================================================== */

.badge--default .badge__icon {
  filter: none;
}

/* ==========================================================
   SIZES
========================================================== */

.badge--sm {
  min-height: 20px;

  padding: 0 8px;

  gap: 5px;

  font-size: 11px;
}

.badge--sm .badge__icon {
  width: 12px;
  height: 12px;
}

.badge--sm .badge__dot {
  width: 6px;
  height: 6px;
}

.badge--md {
  min-height: 24px;

  padding: 0 10px;

  gap: 6px;

  font-size: var(--font-size-xs);
}

.badge--md .badge__icon {
  width: 14px;
  height: 14px;
}

.badge--md .badge__dot {
  width: 7px;
  height: 7px;
}

.badge--lg {
  min-height: 30px;

  padding: 0 12px;

  gap: 7px;

  font-size: 13px;
}

.badge--lg .badge__icon {
  width: 16px;
  height: 16px;
}

.badge--lg .badge__dot {
  width: 8px;
  height: 8px;
}

/* ==========================================================
   OUTLINE
========================================================== */

.badge--outline {
  background: #ffffff;
}

.badge--outline.badge--default {
  color: var(--text);

  border-color: var(--border-strong);
}

.badge--outline.badge--primary {
  color: var(--primary);

  border-color: var(--primary);
}

.badge--outline.badge--secondary {
  color: var(--secondary);

  border-color: var(--secondary);
}

.badge--outline.badge--success {
  color: var(--success);

  border-color: var(--success);
}

.badge--outline.badge--warning {
  color: var(--warning);

  border-color: var(--warning);
}

.badge--outline.badge--danger {
  color: var(--danger);

  border-color: var(--danger);
}

/* ==========================================================
   OUTLINE ICON
========================================================== */

.badge--outline .badge__icon {
  filter: none;
}

/* ==========================================================
   DOT ONLY
========================================================== */

.badge--dot {
  width: 24px;
  height: 24px;

  min-height: 24px;

  padding: 0;
}

.badge--dot.badge--sm {
  width: 20px;
  height: 20px;
}

.badge--dot.badge--lg {
  width: 30px;
  height: 30px;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 480px) {
  .badge--lg {
    min-height: 28px;

    padding: 0 10px;

    font-size: var(--font-size-xs);
  }
}