/* Copyright (c) Juan-Pablo Scaletti <juanpablo@jpscaletti.com> */
.jxui-badge:not([data-var]) {
  --badge-color: var(--ui-bg-neutral-muted);
  --badge-border: var(--ui-border-default);
}
.jxui-badge[data-var="info"] {
  --badge-color: var(--ui-bg-info);
}
.jxui-badge[data-var="success"]  {
  --badge-color: var(--ui-bg-success);
}
.jxui-badge[data-var="option"] {
  --badge-color: var(--ui-bg-option);
}
.jxui-badge[data-var="warning"] {
  --badge-color: var(--ui-bg-warning);
}
.jxui-badge[data-var="critical"] {
  --badge-color: var(--ui-bg-critical);
}
.jxui-badge[data-var="accent"] {
  --badge-color: var(--ui-bg-accent);
}
.jxui-badge[data-var="outline"] {
  --badge-color: --ui-bg-base-300;
  --badge-border: var(--ui-border-default);
}

.jxui-badge {
  display: inline-flex;
  font-weight: 500;
  border-radius: var(--ui-radius-xl);
  flex-grow: 0;
  flex-shrink: 0;
  width: fit-content;
  height: fit-content;
  line-height: 1;
  cursor: default;
  color: var(--badge-color);
  background: color-mix(in srgb, var(--badge-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--badge-border, var(--badge-color)) 90%, transparent);
}
@supports (color: color-mix(in lab,red,red)) {
  .jxui-badge {
    background: color-mix(in srgb, var(--badge-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--badge-border, var(--badge-color)) 90%, transparent);
  }
}

.jxui-badge[data-size="mini"] {
  font-size: var(--ui-font-size-xs);
  padding: var(--2px) var(--9px);
}
.jxui-badge[data-size="small"] {
  font-size: var(--ui-font-size-xs);
  padding: var(--3px) var(--10px);
}
.jxui-badge:not([data-size]),
.jxui-badge[data-size="medium"] {
  font-size: var(--ui-font-size-sm);
  padding: var(--4px) var(--10px);
  border-radius: var(--ui-radius-2xl);
}
.jxui-badge[data-size="large"] {
  font-size: var(--ui-font-size-sm);
  padding: var(--5px) var(--12px);
  border-radius: var(--ui-radius-2xl);
}
.jxui-badge[data-size="xlarge"] {
  font-size: var(--ui-font-size-md);
  padding: var(--5px) var(--14px);
  border-radius: var(--ui-radius-2xl);
}