/* ==========================================================================
   HIZIRBEY DESIGN SYSTEM - BADGE COMPONENT

   Proje:
   HIZIRBEY Portal

   Paket:
   HIZIRBEY Design System

   Bileşen:
   Badge

   Dosya:
   themes/default/assets/css/hds/components/badge/base.css

   Açıklama:
   HDS Badge bileşeninin genel yerleşim, tipografi ve görünüm davranışlarını yönetir.

   Yazar:
   Mehmet Kalli

   Oluşturuldu:
   01.08.2026 02:20

   Güncellendi:
   12.08.2026

   Sürüm:
   2.0.0

   Ownership:
   Public HDS Badge component presentation; legacy ve Studio extension hariç

   Contract:
   Root: .hds-badge
   Children: .hds-badge__icon, .hds-badge__text
   Modifiers: variant, size, shape
========================================================================== */

/* =========================================================================
 * >>> HDS Badge Base
 * ========================================================================= */

.hds-badge {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;

  border: 1px solid transparent;

  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

/* <<< HDS Badge Base */

/* =========================================================================
 * >>> HDS Badge Icon
 * ========================================================================= */

.hds-badge__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  font-weight: 800;
  line-height: 1;
}

/* <<< HDS Badge Icon */

/* =========================================================================
 * >>> HDS Badge Text
 * ========================================================================= */

.hds-badge__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* <<< HDS Badge Text */

/* =========================================================================
 * >>> HDS Badge Sizes
 * ========================================================================= */

.hds-badge.sm {
  min-height: 22px;
  padding: 4px 8px;

  font-size: 11px;
}

.hds-badge.md {
  min-height: 26px;
  padding: 5px 10px;

  font-size: 12px;
}

.hds-badge.lg {
  min-height: 32px;
  padding: 7px 13px;

  font-size: 14px;
}

/* <<< HDS Badge Sizes */

/* =========================================================================
 * >>> HDS Badge Shapes
 * ========================================================================= */

.hds-badge.square {
  border-radius: 0;
}

.hds-badge.rounded {
  border-radius: 6px;
}

.hds-badge.pill {
  border-radius: 999px;
}

/* <<< HDS Badge Shapes */

/* =========================================================================
 * >>> HDS Badge Variants
 * ========================================================================= */

.hds-badge.primary {
  border-color: #8dc2cf;
  background: #e4f4f7;
  color: #0f5666;
}

.hds-badge.secondary {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #344054;
}

.hds-badge.success {
  border-color: #8ad4b3;
  background: #ecfdf3;
  color: #136c49;
}

.hds-badge.danger {
  border-color: #eda4a4;
  background: #fef3f2;
  color: #a32727;
}

.hds-badge.warning {
  border-color: #f2cb76;
  background: #fffaeb;
  color: #8a5900;
}

.hds-badge.info {
  border-color: #8bbfe3;
  background: #eff8ff;
  color: #175f92;
}

.hds-badge.light {
  border-color: #e4e7ec;
  background: #ffffff;
  color: #475467;
}
.hds-badge.code {
  border-color: #c8d6e5;

  background: #f3f7fb;

  color: #334155;
}
.hds-badge.dark {
  border-color: #1d2939;
  background: #1d2939;
  color: #ffffff;
}

/* <<< HDS Badge Variants */