@use '../config' as *;

.badge {
  --badge-padding-x: #{$badge-padding-x};
  --badge-padding-y: #{$badge-padding-y};
  --badge-font-size: #{$badge-font-size};
  --badge-font-weight: #{$badge-font-weight};
  --badge-color: #{$badge-color};
  --badge-border-radius: #{$badge-border-radius};
  --badge-icon-size: 1em;
  --badge-line-height: 1;
  --badge-gap: #{$badge-gap};
  display: inline-flex;
  gap: var(--badge-gap);
  align-items: center;
  justify-content: center;
  min-width: calc(1em + var(--badge-padding-y) * 2 + 2px);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  overflow: hidden;
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: var(--badge-line-height);
  color: var(--badge-color);
  text-align: center;
  letter-spacing: 0.04em;
  white-space: nowrap;
  vertical-align: bottom;
  user-select: none;
  background: $badge-bg-color;
  border: var(--border-width) var(--border-style) transparent;
  @include border-radius(var(--badge-border-radius));

  @at-root a#{&} {
    background: var(--bg-surface-secondary);
  }

  .icon {
    width: 1em;
    height: 1em;
    font-size: var(--badge-icon-size);
    stroke-width: 2;
  }
}

.badge:empty,
.badge-dot {
  display: inline-block;
  width: $badge-empty-size;
  min-width: 0;
  height: $badge-empty-size;
  min-height: auto;
  padding: 0;
  vertical-align: baseline;
  @include border-radius(var(--border-radius-pill));
}

//
// Outline badge
//
.badge-outline {
  background-color: transparent;
  border: var(--border-width) var(--border-style) currentColor;
}

//
// Pill badge
//
.badge-pill {
  @include border-radius(var(--border-radius-pill));
}

//
// Badge list
//
.badge-list,
.badges-list {
  // `.badges-list` is deprecated, use `.badge-list` instead
  @include elements-list();
}

//
// Notification badge
//
.badge-notification {
  position: absolute !important;
  inset-inline-end: 0 !important;
  top: 0 !important;
  z-index: 1;

  /* rtl:ignore */
  transform: translate(calc(var(--dir) * 50%), -50%);
}

.badge-blink {
  animation: blink 2s infinite;
}

//
// Badge sizes
//
.badge-sm {
  --badge-font-size: #{$badge-font-size-sm};
  --badge-icon-size: 1em;
  --badge-padding-y: 2px;
  --badge-padding-x: #{$badge-padding-x-sm};
}

.badge-lg {
  --badge-font-size: #{$badge-font-size-lg};
  --badge-icon-size: 1em;
  --badge-padding-y: #{$badge-padding-y-lg};
  --badge-padding-x: #{$badge-padding-x-lg};
}

//
// Badge with only icon
//
.badge-icononly {
  --badge-padding-x: 0;
}