// Pull the whole theme so a standalone `@use 'ngwr/badge'` brings in
// every design token the badge + tag use (border-radius, colors, etc.).
// Sass deduplicates `@use` per compilation, so multiple components
// importing theme only emit it once.
@use '../../theme/styles' as theme;
@forward 'tag';

.wr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wr-badge-min-height);
  padding: var(--wr-badge-padding-y) var(--wr-badge-padding-x);
  border-radius: var(--wr-badge-radius);
  font-size: var(--wr-badge-font-size);
  font-weight: var(--wr-badge-font-weight);
  // line-height 1 + min-height: flex centres the tight glyph box vertically,
  // instead of line-height baking in asymmetric leading (which left small
  // sizes looking top-heavy).
  line-height: 1;
  white-space: nowrap;

  // Defaults — sized modifiers override these
  --wr-badge-padding-y: 0.25rem;
  --wr-badge-padding-x: 0.5rem;
  --wr-badge-radius: var(--wr-border-radius-sm);
  --wr-badge-font-size: var(--wr-text-xs);
  --wr-badge-min-height: 1.5rem;
  --wr-badge-font-weight: 600;

  // Sizes

  &--sm {
    --wr-badge-padding-y: 0.125rem;
    --wr-badge-padding-x: 0.375rem;
    --wr-badge-font-size: 0.625rem; // 10px — intentional micro-count, below --wr-text-xs
    --wr-badge-min-height: 1.125rem;
  }

  &--lg {
    --wr-badge-padding-y: 0.375rem;
    --wr-badge-padding-x: 0.75rem;
    --wr-badge-font-size: var(--wr-text-sm);
    --wr-badge-min-height: 2rem;
  }

  // Shape — default `rounded` keeps the small radius from the defaults
  // above; `pill` rounds the ends fully and adds horizontal breathing
  // room so counts/labels don't kiss the edges.

  &--pill {
    --wr-badge-radius: var(--wr-border-radius-pill);
    --wr-badge-padding-x: 0.75rem;
  }

  // Squircle — overrides the plain `border-radius` with the
  // `corner-shape: squircle` mixin so supporting browsers (Chrome 145+)
  // render iOS-style continuous-curvature corners.
  &--squircle {
    @include theme.smooth-br(var(--wr-badge-radius));
  }

  // Colors

  @each $name in theme.$colors {
    &--#{$name} {
      background-color: var(--wr-color-#{$name});
      color: var(--wr-color-#{$name}-contrast);
    }
  }

  // Outlined — transparent fill, colored border + text. The inset ring
  // replaces the solid background, so padding stays identical.
  &--outlined {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px currentcolor;

    @each $name in theme.$colors {
      &.wr-badge--#{$name} {
        color: var(--wr-color-#{$name});
      }
    }
  }
}