@use 'ui-design-system/src/styles/semantic/index' as *;
/**
 * ==========================================================================
 * BADGE COMPONENT STYLES
 * ==========================================================================
 * Material Design 3 inspired badge component with design token integration.
 * Supports multiple variants, sizes, shapes, and dot mode for notifications.
 * ==========================================================================
 */


// Tokens available globally via main application styles

.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: $semantic-typography-font-weight-medium;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  box-sizing: border-box;
  transition: all $semantic-duration-short $semantic-easing-standard;
  background-color: aqua;

  // Default size (md)
  min-width: $semantic-sizing-icon-navigation;
  height: $semantic-sizing-icon-navigation;
  padding: 0 $semantic-spacing-component-xs;
  font-size: $semantic-typography-font-size-xs;
  border-radius: $semantic-border-radius-full;
  
  // Default variant styling
  background-color: $semantic-color-surface-secondary;
  color: $semantic-color-text-primary;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;

  // Size variants
  &[data-size="xs"] {
    min-width: $semantic-typography-icon-small-size;
    height: $semantic-typography-icon-small-size;
    padding: 0 calc($semantic-spacing-component-xs / 2);
    font-size: $semantic-typography-font-size-xs;
  }

  &[data-size="sm"] {
    min-width: $semantic-sizing-icon-button;
    height: $semantic-sizing-icon-button;
    padding: 0 $semantic-spacing-component-xs;
    font-size: $semantic-typography-font-size-xs;
  }

  &[data-size="md"] {
    min-width: $semantic-sizing-icon-navigation;
    height: $semantic-sizing-icon-navigation;
    padding: 0 $semantic-spacing-component-xs;
    font-size: $semantic-typography-font-size-xs;
  }

  &[data-size="lg"] {
    min-width: $semantic-sizing-icon-header;
    height: $semantic-sizing-icon-header;
    padding: 0 $semantic-spacing-component-sm;
    font-size: $semantic-typography-font-size-sm;
  }

  // Shape variants
  &[data-shape="pill"] {
    border-radius: $semantic-border-radius-full;
  }

  &[data-shape="rounded"] {
    border-radius: $semantic-border-radius-md;
  }

  &[data-shape="square"] {
    border-radius: $semantic-border-radius-sm;
  }

  // Dot mode - small notification dot
  &[data-dot="true"] {
    min-width: 0;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid $semantic-color-surface-primary;
    
    &[data-size="xs"] {
      width: 6px;
      height: 6px;
    }

    &[data-size="sm"] {
      width: 8px;
      height: 8px;
    }

    &[data-size="md"] {
      width: 10px;
      height: 10px;
    }

    &[data-size="lg"] {
      width: 12px;
      height: 12px;
    }
  }

  // Color variants
  &[data-variant="default"] {
    background-color: $semantic-color-surface-secondary;
    color: $semantic-color-text-primary;
    border-color: $semantic-color-border-subtle;
  }

  &[data-variant="primary"] {
    background-color: $semantic-color-brand-primary;
    color: $semantic-color-text-inverse;
    border-color: $semantic-color-brand-primary;
  }

  &[data-variant="secondary"] {
    background-color: $semantic-color-brand-secondary;
    color: $semantic-color-text-inverse;
    border-color: $semantic-color-brand-secondary;
  }

  &[data-variant="success"] {
    background-color: $semantic-color-success;
    color: $semantic-color-text-inverse;
    border-color: $semantic-color-success;
  }

  &[data-variant="warning"] {
    background-color: $semantic-color-warning;
    color: $semantic-color-text-inverse;
    border-color: $semantic-color-warning;
  }

  &[data-variant="danger"] {
    background-color: $semantic-color-danger;
    color: $semantic-color-text-inverse;
    border-color: $semantic-color-danger;
  }

  &[data-variant="info"] {
    background-color: $semantic-color-info;
    color: $semantic-color-text-inverse;
    border-color: $semantic-color-info;
  }

  // Hover states for interactive badges
  &:hover {
    transform: translateY(-1px);
    box-shadow: $semantic-shadow-elevation-1;
  }

  // Focus states for accessibility
  &:focus {
    outline: 2px solid $semantic-color-focus-ring;
    outline-offset: 2px;
  }

  // Responsive adjustments
  @media (max-width: calc($semantic-breakpoint-sm - 1px)) {
    &[data-size="lg"] {
      min-width: $semantic-sizing-icon-navigation;
      height: $semantic-sizing-icon-navigation;
      padding: 0 $semantic-spacing-component-xs;
      font-size: $semantic-typography-font-size-xs;
    }
  }
}