/**
 * Kosmetix Badge Component
 * Reusable badge/label styling with design system
 *
 * @package Kosmetix
 */

/* ============================================
   BASE BADGE
   ============================================ */

.kosmetix-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--3xs);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--wider);
  white-space: nowrap;
  box-sizing: border-box;
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

/* Small */
.kosmetix-badge--sm {
  height: 20px;
  padding: 0 var(--wp--preset--spacing--2xs);
  font-size: var(--wp--preset--font-size--2xs);
  border-radius: var(--wp--custom--radius--xs);
}

.kosmetix-badge--sm .kosmetix-badge__icon {
  font-size: 12px;
}

/* Medium (default) */
.kosmetix-badge--md {
  height: 24px;
  padding: 0 var(--wp--preset--spacing--xs);
  font-size: var(--wp--preset--font-size--xs);
  border-radius: var(--wp--custom--radius--sm);
}

.kosmetix-badge--md .kosmetix-badge__icon {
  font-size: 14px;
}

/* Large */
.kosmetix-badge--lg {
  height: 28px;
  padding: 0 var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--sm);
  border-radius: var(--wp--custom--radius--md);
}

.kosmetix-badge--lg .kosmetix-badge__icon {
  font-size: 16px;
}

/* ============================================
   VARIANT STYLES
   ============================================ */

/* Default */
.kosmetix-badge--default {
  background: var(--wp--preset--color--mist);
  color: var(--wp--preset--color--charcoal);
}

/* Sale/Promotion - Red/Error color */
.kosmetix-badge--sale {
  background: var(--wp--preset--color--error);
  color: var(--wp--preset--color--white);
}

/* Hot/Featured - Rose gold */
.kosmetix-badge--hot {
  background: var(--wp--preset--color--rose-gold);
  color: var(--wp--preset--color--white);
}

/* New - Champagne gold */
.kosmetix-badge--new {
  background: var(--wp--preset--color--champagne-gold);
  color: var(--wp--preset--color--charcoal);
}

/* Success */
.kosmetix-badge--success {
  background: var(--wp--preset--color--success);
  color: var(--wp--preset--color--white);
}

/* Warning */
.kosmetix-badge--warning {
  background: var(--wp--preset--color--warning);
  color: var(--wp--preset--color--white);
}

/* Error */
.kosmetix-badge--error {
  background: var(--wp--preset--color--error);
  color: var(--wp--preset--color--white);
}

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

.kosmetix-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   POSITIONING UTILITIES
   ============================================ */

/* For badges positioned on product cards */
.kosmetix-badge--absolute {
  position: absolute;
  z-index: 2;
}

.kosmetix-badge--top-left {
  top: var(--wp--preset--spacing--sm);
  left: var(--wp--preset--spacing--sm);
}

.kosmetix-badge--top-right {
  top: var(--wp--preset--spacing--sm);
  right: var(--wp--preset--spacing--sm);
}

/* ============================================
   BADGE GROUP
   ============================================ */

.kosmetix-badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--2xs);
  align-items: center;
}

/* For absolutely positioned badge groups on cards */
.kosmetix-badge-group--absolute {
  position: absolute;
  top: var(--wp--preset--spacing--sm);
  left: var(--wp--preset--spacing--sm);
  right: var(--wp--preset--spacing--sm);
  z-index: 2;
  pointer-events: none;
  flex-direction: column;
  align-items: flex-start;
}

.kosmetix-badge-group--absolute-right {
  align-items: flex-end;
  left: auto;
}