@use "functions" as *;
@use "mixins/border-radius" as *;
@use "mixins/gradients" as *;
@use "mixins/tokens" as *;

$badge-tokens: () !default;

// scss-docs-start badge-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$badge-tokens: defaults(
  (
    --badge-padding-x: .625em,
    --badge-padding-y: .25em,
    --badge-font-size: clamp(12px, .75em, .75em),
    --badge-font-weight: var(--font-weight-semibold),
    --badge-color: inherit,
    --badge-bg: var(--bg-2),
    --badge-border-width: var(--border-width),
    --badge-border-color: transparent,
    --badge-border-radius: var(--border-radius-lg),
  ),
  $badge-tokens
);
// scss-docs-end badge-tokens

// scss-docs-start badge-variants
$badge-variants: (
  "subtle": (
    "color": "text",
    "bg": "bg-subtle",
    "border-color": "transparent"
  ),
  "outline": (
    "color": "text",
    "bg": "transparent",
    "border-color": "border"
  )
) !default;
// scss-docs-end badge-variants

@layer components {
  .badge {
    @include tokens($badge-tokens);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.375rem;
    padding: var(--badge-padding-y) var(--badge-padding-x);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: 1;
    color: var(--theme-contrast, var(--badge-color));
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: var(--theme-bg, var(--badge-bg));
    border: var(--badge-border-width) solid var(--badge-border-color);
    @include border-radius(var(--badge-border-radius));
    @include gradient-bg();

    // Empty badges collapse automatically
    &:empty {
      display: none;
    }
  }

  // Quick fix for badges in buttons
  .btn .badge {
    position: relative;
    top: -1px;
  }

  // scss-docs-start badge-variant-loop
  @each $variant, $properties in $badge-variants {
    .badge-#{$variant} {
      @each $property, $value in $properties {
        @if $value == "transparent" {
          --badge-#{$property}: transparent;
        } @else {
          --badge-#{$property}: var(--theme-#{$value});
        }
      }

      color: var(--badge-color);
      background-color: var(--badge-bg);
      border-color: var(--badge-border-color);
    }
  }
  // scss-docs-end badge-variant-loop
}