/* Aniyab UI — Badge / Chip
 * From Figma: Components / badge
 *
 * Usage:
 *   <span class="ay-badge ay-badge--blue">
 *     <span class="ay-badge__label">متن</span>
 *     <span class="ay-badge__icon">…svg…</span>
 *   </span>
 *
 * Colors:  --blue | --green | --orange | --red
 * Styles:  solid (default) | --soft (light/pale)
 */

.ay-badge {
  --ay-badge-bg: var(--ay-brand-primary, #002D71);
  --ay-badge-color: var(--ay-text-contrast, #FFFFFF);

  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  height: 24px;
  min-height: 24px;
  padding: 0 4px 0 8px;
  background: var(--ay-badge-bg);
  border-radius: var(--ay-radius-badge, 12px);
  color: var(--ay-badge-color);
  font-family: var(--ay-font-family, dana, IRANSansfanum, Tahoma, sans-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
}

.ay-badge__label {
  display: inline-flex;
  align-items: center;
  padding: 0 4px 0 0;
  color: inherit;
}

.ay-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  color: inherit;
}

.ay-badge__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

.ay-badge__icon svg[fill]:not([fill="none"]) {
  fill: currentColor;
  stroke: none;
}

/* Solid */
.ay-badge--blue {
  --ay-badge-bg: var(--ay-brand-primary, #002D71);
  --ay-badge-color: var(--ay-text-contrast, #FFFFFF);
}

.ay-badge--green {
  --ay-badge-bg: var(--ay-success, #129A44);
  --ay-badge-color: var(--ay-text-contrast, #FFFFFF);
}

.ay-badge--orange {
  --ay-badge-bg: var(--ay-brand-secondary-dark, #ED5904);
  --ay-badge-color: var(--ay-text-contrast, #FFFFFF);
}

.ay-badge--red {
  --ay-badge-bg: var(--ay-error, #D92412);
  --ay-badge-color: var(--ay-text-contrast, #FFFFFF);
}

/* Soft / light */
.ay-badge--blue.ay-badge--soft {
  --ay-badge-bg: var(--ay-brand-primary-paler, #EBF1FB);
  --ay-badge-color: var(--ay-brand-primary, #002D71);
}

.ay-badge--green.ay-badge--soft {
  --ay-badge-bg: var(--ay-success-pale, #F0FEF5);
  --ay-badge-color: var(--ay-success, #129A44);
}

.ay-badge--orange.ay-badge--soft {
  --ay-badge-bg: var(--ay-brand-secondary-paler, #FFF3EB);
  --ay-badge-color: var(--ay-brand-secondary-dark, #ED5904);
}

.ay-badge--red.ay-badge--soft {
  --ay-badge-bg: var(--ay-error-pale, #FFEEED);
  --ay-badge-color: var(--ay-error, #D92412);
}

/* Optional dismiss button inside badge */
.ay-badge__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
}

.ay-badge__close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 1px;
}