/**
 * Badge Component Styles
 * WooCommerce to Shopify Sync Plugin
 * 
 * Badge components for status indicators and labels.
 */

/* Base Badge */
.w2ssyn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--w2ssyn-spacing-xs) var(--w2ssyn-spacing-sm);
  font-size: var(--w2ssyn-font-size-xs);
  font-weight: var(--w2ssyn-font-weight-semibold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--w2ssyn-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Status Badges */
.w2ssyn-badge--success {
  background-color: var(--w2ssyn-success);
  color: #ffffff;
}

.w2ssyn-badge--error,
.w2ssyn-badge--failure {
  background-color: var(--w2ssyn-error);
  color: #ffffff;
}

.w2ssyn-badge--warning {
  background-color: var(--w2ssyn-warning);
  color: #ffffff;
}

.w2ssyn-badge--info {
  background-color: var(--w2ssyn-info);
  color: #ffffff;
}

.w2ssyn-badge--primary {
  background-color: var(--w2ssyn-primary);
  color: #ffffff;
}

/* Platform Badges */
.w2ssyn-badge--woo {
  background-color: var(--w2ssyn-woo-primary);
  color: #ffffff;
}

.w2ssyn-badge--shopify {
  background-color: var(--w2ssyn-shopify-primary);
  color: #ffffff;
}

/* Status Badge Variants */
.w2ssyn-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--w2ssyn-spacing-xs);
  padding: var(--w2ssyn-spacing-xs) var(--w2ssyn-spacing-sm);
  font-size: var(--w2ssyn-font-size-sm);
  font-weight: var(--w2ssyn-font-weight-medium);
  border-radius: var(--w2ssyn-radius-sm);
}

.w2ssyn-status-badge--connected {
  background-color: var(--w2ssyn-success-light);
  color: var(--w2ssyn-success-dark);
}

.w2ssyn-status-badge--disconnected {
  background-color: var(--w2ssyn-error-light);
  color: var(--w2ssyn-error-dark);
}

.w2ssyn-status-badge--pending {
  background-color: var(--w2ssyn-warning-light);
  color: var(--w2ssyn-warning-dark);
}

/* Status Indicator Dot */
.w2ssyn-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--w2ssyn-spacing-xs);
}

.w2ssyn-status-dot--success {
  background-color: var(--w2ssyn-success);
}

.w2ssyn-status-dot--error {
  background-color: var(--w2ssyn-error);
}

.w2ssyn-status-dot--warning {
  background-color: var(--w2ssyn-warning);
}

.w2ssyn-status-dot--info {
  background-color: var(--w2ssyn-info);
}

/* Pro Badge */
.w2ssyn-pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--w2ssyn-spacing-xs) var(--w2ssyn-spacing-sm);
  font-size: var(--w2ssyn-font-size-xs);
  font-weight: var(--w2ssyn-font-weight-bold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--w2ssyn-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--w2ssyn-pro-gradient-start) 0%, var(--w2ssyn-pro-gradient-end) 100%);
  color: #ffffff;
  box-shadow: var(--w2ssyn-shadow-sm);
}

/* Badge Sizes */
.w2ssyn-badge--sm {
  padding: 2px var(--w2ssyn-spacing-xs);
  font-size: 10px;
}

.w2ssyn-badge--lg {
  padding: var(--w2ssyn-spacing-sm) var(--w2ssyn-spacing-md);
  font-size: var(--w2ssyn-font-size-sm);
}

/* Badge Pill */
.w2ssyn-badge--pill {
  border-radius: var(--w2ssyn-radius-full);
  padding-left: var(--w2ssyn-spacing-md);
  padding-right: var(--w2ssyn-spacing-md);
}

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

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

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

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

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