/* ==========================================================================
   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:
   26.10.2026 (dot; yüzey / ölçü kancaları)

   Sürüm:
   2.2.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, --initials (--hue-0..3), --mark, --link, --wrap, --dot
   Hooks: --hds-badge-initials-size, --hds-badge-initials-font-size, --hds-badge-mark-size,
          --hds-badge-background, --hds-badge-color, --hds-badge-border-color, --hds-badge-border-width,
          --hds-badge-padding, --hds-badge-min-height, --hds-badge-font-size, --hds-badge-font-weight,
          --hds-badge-dot-size, --hds-badge-dot-color
========================================================================== */

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

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

  border: var(--hds-badge-border-width, 1px) solid transparent;

  font-weight: var(--hds-badge-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: var(--hds-badge-min-height, 22px);
  padding: var(--hds-badge-padding, 4px 8px);

  font-size: var(--hds-badge-font-size, 11px);
}

.hds-badge.md {
  min-height: var(--hds-badge-min-height, 26px);
  padding: var(--hds-badge-padding, 5px 10px);

  font-size: var(--hds-badge-font-size, 12px);
}

.hds-badge.lg {
  min-height: var(--hds-badge-min-height, 32px);
  padding: var(--hds-badge-padding, 7px 13px);

  font-size: var(--hds-badge-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: var(--hds-badge-border-color, #8dc2cf);
  background: var(--hds-badge-background, #e4f4f7);
  color: var(--hds-badge-color, #0f5666);
}

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

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

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

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

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

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

  background: var(--hds-badge-background, #f3f7fb);

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

/* <<< HDS Badge Variants */

/* =========================================================================
 * >>> HDS Badge Initials (23.10.2026)
 * Ad soyaddan baş harf yuvarlağı; ton addan sabit (4 ton).
 * ========================================================================= */

.hds-badge.hds-badge--initials {
  flex: 0 0 auto;
  width: var(--hds-badge-initials-size, 2.2rem);
  height: var(--hds-badge-initials-size, 2.2rem);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: var(--hds-badge-initials-font-size, 0.8rem);
  font-weight: 800;
}

.hds-badge--initials.hds-badge--hue-0 { background: #e8f0fe; color: #1d4ed8; }
.hds-badge--initials.hds-badge--hue-1 { background: #f3e8ff; color: #7e22ce; }
.hds-badge--initials.hds-badge--hue-2 { background: #e3f5ea; color: #15803d; }
.hds-badge--initials.hds-badge--hue-3 { background: #fff1e0; color: #b45309; }

/* <<< HDS Badge Initials */

/* =========================================================================
 * >>> HDS Badge Mark (23.10.2026)
 * Evet / hayır işareti: ✓ success, ✗ danger; yuvarlak.
 * ========================================================================= */

.hds-badge.hds-badge--mark {
  width: var(--hds-badge-mark-size, 1.8rem);
  height: var(--hds-badge-mark-size, 1.8rem);
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 800;
}

/* <<< HDS Badge Mark */

/* =========================================================================
 * >>> HDS Badge Link (23.10.2026)
 * ========================================================================= */

a.hds-badge--link {
  text-decoration: none;
  cursor: pointer;
}

a.hds-badge--link:hover {
  filter: brightness(0.95);
  text-decoration: none;
}

a.hds-badge--link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* <<< HDS Badge Link */

/* =========================================================================
 * >>> HDS Badge Wrap (Badge::wrap · 25.10.2026): uzun yazı alt satıra iner.
 * ========================================================================= */

.hds-badge.hds-badge--wrap {
  height: auto;
  white-space: normal;
}

.hds-badge--wrap .hds-badge__text {
  overflow: visible;
  text-overflow: clip;
}

/* <<< HDS Badge Wrap */

/* =========================================================================
 * >>> HDS Badge Dot (Badge::dot · 26.10.2026): yazının başında küçük durum noktası.
 * ========================================================================= */

.hds-badge--dot::before {
  content: '';
  flex: 0 0 auto;
  width: var(--hds-badge-dot-size, 0.4rem);
  height: var(--hds-badge-dot-size, 0.4rem);
  border-radius: 50%;
  background: var(--hds-badge-dot-color, currentColor);
}

/* <<< HDS Badge Dot */