/* 
  Badge Component Styles
  Defines consistent badge styling for status indicators across the application
*/

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Badge variants */
.badge-primary {
  background-color: var(--clr-primary-a20);
  color: var(--clr-light-a0);
}

.badge-secondary {
  background-color: var(--clr-surface-a40);
  color: var(--clr-light-a0);
}

.badge-success {
  background-color: var(--clr-primary-a0);
  color: var(--clr-white-a0);
}

.badge-success-light {
  background-color: var(--clr-primary-a30);
  color: var(--clr-light-a0);
}

.badge-danger-light {
  background-color: var(--clr-surface-a40);
  color: var(--clr-white-a0);
}

.badge-danger {
  background-color: var(--color-danger-light);
  color: #383737;
}

.badge-warning {
  background-color: var(--color-warning);
  color: var(--clr-light-a0);
}

.badge-info {
  background-color: var(--color-info);
  color: var(--clr-light-a0);
}

/* Badge sizes */
.badge-sm {
  font-size: var(--text-xs);
  padding: 0.125rem var(--space-1);
}

.badge-lg {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
}

/* Outline badges */
.badge-outline {
  background-color: transparent;
  border: 1px solid currentColor;
}

.badge-outline-primary {
  color: var(--clr-primary-a0);
  border-color: var(--clr-primary-a0);
}

.badge-outline-secondary {
  color: var(--clr-surface-a40);
  border-color: var(--clr-surface-a40);
}

.badge-outline-success {
  color: var(--clr-primary-a0);
  border-color: var(--clr-primary-a0);
}

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

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

.badge-outline-info {
  color: var(--color-info);
  border-color: var(--color-info);
}

/* Badge with dot */
.badge-dot {
  position: relative;
  padding-inline-start: var(--space-4);
}

.badge-dot::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
}

/* Badge with icon */
.badge .icon {
  margin-inline-end: var(--space-1);
}

/* Percentage badges - for player hit percentages */
.percentage-badge {
  font-weight: var(--font-bold);
  min-width: 3rem;
  text-align: center;
}

/* Badge group */
.badge-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Stats badges for player statistics */
.stats-badge-high {
  background-color: var(--clr-primary-a0);
  color: var(--clr-light-a0);
}

.stats-badge-medium {
  background-color: var(--color-warning);
  color: var(--clr-light-a0);
}

.stats-badge-low {
  background-color: var(--color-danger);
  color: var(--clr-light-a0);
}

/* Odds badges for betting odds */
.odds-badge {
  font-weight: var(--font-bold);
}

.odds-badge-low {
  background-color: var(--clr-primary-a20);
}

.odds-badge-medium {
  background-color: var(--color-warning-light);
}

.odds-badge-high {
  background-color: var(--color-danger-light);
}