@use "sass:map";
@use "../base/color" as cl;
@use "../base/border" as bo;
@use "../base/font" as ft;
@use "../base/space" as sp;
@use "../base/size" as sz;
@use "../base/variants" as vr;

// Badges / pills
//
//   <span class="qo-badge qo-badge-success">Active</span>
//   <span class="qo-badge qo-badge-system">System</span>
//
// Tint fill + matching ink by default — that is the listing page's treatment
// for user type, status and role origin. `qo-badge-solid-*` gives the filled
// form for the cases that need more weight.

$badge-sizes: (
  sm: (20px, sp.$space-2, ft.$font-size-xxs),
  md: (sz.$badge-height, sp.$space-3, ft.$font-size-xs),
  lg: (28px, sp.$space-3, ft.$font-size-sm),
) !default;

.qo-badge {
  min-height: sz.$badge-height;
  padding: 0 sp.$space-3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: sp.$space-1;
  border: bo.$border-width-sm solid transparent;
  border-radius: bo.$border-radius-pill;
  font-family: ft.$font-family-primary;
  font-size: ft.$font-size-xs;
  font-weight: ft.$font-weight-semibold;
  line-height: 1;
  white-space: nowrap;

  @each $name, $spec in $badge-sizes {
    &.qo-badge-#{$name} {
      min-height: nth($spec, 1);
      padding: 0 nth($spec, 2);
      font-size: nth($spec, 3);
    }
  }

  &.qo-badge-square { border-radius: bo.$border-radius-sm; }
  // Status pills sit in a grid column and read better at one width.
  &.qo-badge-fixed { min-width: 84px; }

  // ---- tint (default) — every semantic and every status ----
  @each $name, $spec in vr.$tint-variants {
    &.qo-badge-#{$name} {
      background-color: map.get($spec, soft);
      color: map.get($spec, ink);
    }
  }

  // ---- solid ----
  @each $name, $spec in vr.$variants {
    &.qo-badge-solid-#{$name} {
      background-color: map.get($spec, base);
      color: map.get($spec, on);
    }
  }

  // ---- outline ----
  @each $name, $spec in vr.$variants {
    &.qo-badge-outline-#{$name} {
      background-color: transparent;
      border-color: map.get($spec, base);
      color: map.get($spec, ink);
    }
  }

  // A badge used as a filter chip is interactive; everything else is not.
  &.qo-badge-action {
    cursor: pointer;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
    &:hover { filter: brightness(0.96); }
    &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
  }
}

// A small count bubble — the "3" on a filter button.
.qo-badge-dot {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: bo.$border-radius-pill;
  background-color: cl.$background-danger;
  color: cl.$text-light;
  font-family: ft.$font-family-primary;
  font-size: ft.$font-size-xxs;
  font-weight: ft.$font-weight-bold;
  line-height: 1;
}