/* Variants */
/* Define maps for color-related variables */
nv-badge {
  padding: var(--badge-padding-y) var(--badge-padding-x);
  display: inline-flex !important;
  gap: var(--badge-gap-x);
  vertical-align: middle;
  align-items: center;
  border-radius: var(--radius-rounded-full);
  border-style: solid;
  border-width: 0.5px;
  height: fit-content;
  width: fit-content;
}
nv-badge.is-icon-only {
  padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);
  gap: var(--badge-gap-icon-only-x);
}
nv-badge.with-gap {
  padding: var(--badge-padding-y) var(--badge-padding-x);
  display: inline-flex !important;
  gap: var(--badge-gap-x);
  vertical-align: middle;
  align-items: center;
  border-radius: var(--radius-rounded-full);
  border-style: solid;
  border-width: 0.5px;
  height: fit-content;
  width: fit-content;
}
nv-badge.with-gap.is-icon-only {
  padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);
  gap: var(--badge-gap-icon-only-x);
}
nv-badge.visually-hidden {
  position: absolute;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}
nv-badge:not(.with-gap) {
  padding: var(--badge-padding-y) var(--badge-padding-x);
  display: inline-flex !important;
  gap: var(--badge-gap-x);
  vertical-align: middle;
  align-items: center;
  border-radius: var(--radius-rounded-full);
  border-style: solid;
  border-width: 0.5px;
  height: fit-content;
  width: fit-content;
}
nv-badge:not(.with-gap).is-icon-only {
  padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);
  gap: var(--badge-gap-icon-only-x);
}
nv-badge.badge-1 {
  color: var(--color-rainbow-1-text);
  background-color: var(--color-rainbow-1-background);
  border-color: var(--color-rainbow-1-border);
}
nv-badge.badge-1 .close:focus, nv-badge.badge-1 .close:focus-within {
  outline: none;
}
nv-badge.badge-1 .close:focus-visible, nv-badge.badge-1 .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-1 nv-icon {
  color: var(--color-rainbow-1-icon);
}
nv-badge.badge-2 {
  color: var(--color-rainbow-2-text);
  background-color: var(--color-rainbow-2-background);
  border-color: var(--color-rainbow-2-border);
}
nv-badge.badge-2 .close:focus, nv-badge.badge-2 .close:focus-within {
  outline: none;
}
nv-badge.badge-2 .close:focus-visible, nv-badge.badge-2 .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-2 nv-icon {
  color: var(--color-rainbow-2-icon);
}
nv-badge.badge-3 {
  color: var(--color-rainbow-3-text);
  background-color: var(--color-rainbow-3-background);
  border-color: var(--color-rainbow-3-border);
}
nv-badge.badge-3 .close:focus, nv-badge.badge-3 .close:focus-within {
  outline: none;
}
nv-badge.badge-3 .close:focus-visible, nv-badge.badge-3 .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-3 nv-icon {
  color: var(--color-rainbow-3-icon);
}
nv-badge.badge-4 {
  color: var(--color-rainbow-4-text);
  background-color: var(--color-rainbow-4-background);
  border-color: var(--color-rainbow-4-border);
}
nv-badge.badge-4 .close:focus, nv-badge.badge-4 .close:focus-within {
  outline: none;
}
nv-badge.badge-4 .close:focus-visible, nv-badge.badge-4 .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-4 nv-icon {
  color: var(--color-rainbow-4-icon);
}
nv-badge.badge-5 {
  color: var(--color-rainbow-5-text);
  background-color: var(--color-rainbow-5-background);
  border-color: var(--color-rainbow-5-border);
}
nv-badge.badge-5 .close:focus, nv-badge.badge-5 .close:focus-within {
  outline: none;
}
nv-badge.badge-5 .close:focus-visible, nv-badge.badge-5 .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-5 nv-icon {
  color: var(--color-rainbow-5-icon);
}
nv-badge.badge-6 {
  color: var(--color-rainbow-6-text);
  background-color: var(--color-rainbow-6-background);
  border-color: var(--color-rainbow-6-border);
}
nv-badge.badge-6 .close:focus, nv-badge.badge-6 .close:focus-within {
  outline: none;
}
nv-badge.badge-6 .close:focus-visible, nv-badge.badge-6 .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-6 nv-icon {
  color: var(--color-rainbow-6-icon);
}
nv-badge.badge-7 {
  color: var(--color-rainbow-7-text);
  background-color: var(--color-rainbow-7-background);
  border-color: var(--color-rainbow-7-border);
}
nv-badge.badge-7 .close:focus, nv-badge.badge-7 .close:focus-within {
  outline: none;
}
nv-badge.badge-7 .close:focus-visible, nv-badge.badge-7 .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-7 nv-icon {
  color: var(--color-rainbow-7-icon);
}
nv-badge.badge-8 {
  color: var(--color-rainbow-8-text);
  background-color: var(--color-rainbow-8-background);
  border-color: var(--color-rainbow-8-border);
}
nv-badge.badge-8 .close:focus, nv-badge.badge-8 .close:focus-within {
  outline: none;
}
nv-badge.badge-8 .close:focus-visible, nv-badge.badge-8 .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-8 nv-icon {
  color: var(--color-rainbow-8-icon);
}
nv-badge.badge-9 {
  color: var(--color-rainbow-9-text);
  background-color: var(--color-rainbow-9-background);
  border-color: var(--color-rainbow-9-border);
}
nv-badge.badge-9 .close:focus, nv-badge.badge-9 .close:focus-within {
  outline: none;
}
nv-badge.badge-9 .close:focus-visible, nv-badge.badge-9 .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-9 nv-icon {
  color: var(--color-rainbow-9-icon);
}
nv-badge.badge-10 {
  color: var(--color-rainbow-10-text);
  background-color: var(--color-rainbow-10-background);
  border-color: var(--color-rainbow-10-border);
}
nv-badge.badge-10 .close:focus, nv-badge.badge-10 .close:focus-within {
  outline: none;
}
nv-badge.badge-10 .close:focus-visible, nv-badge.badge-10 .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-10 nv-icon {
  color: var(--color-rainbow-10-icon);
}
nv-badge.badge-error {
  color: var(--color-feedback-error-low-text);
  background-color: var(--color-feedback-error-low-background);
  border-color: var(--color-feedback-error-low-border);
}
nv-badge.badge-error .close:focus, nv-badge.badge-error .close:focus-within {
  outline: none;
}
nv-badge.badge-error .close:focus-visible, nv-badge.badge-error .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-error-low-content, var(--color-feedback-error-low-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-error nv-icon {
  color: var(--color-feedback-error-low-icon);
}
nv-badge.badge-information {
  color: var(--color-feedback-information-low-text);
  background-color: var(--color-feedback-information-low-background);
  border-color: var(--color-feedback-information-low-border);
}
nv-badge.badge-information .close:focus, nv-badge.badge-information .close:focus-within {
  outline: none;
}
nv-badge.badge-information .close:focus-visible, nv-badge.badge-information .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-information-low-content, var(--color-feedback-information-low-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-information nv-icon {
  color: var(--color-feedback-information-low-icon);
}
nv-badge.badge-neutral {
  color: var(--color-feedback-neutral-low-text);
  background-color: var(--color-feedback-neutral-low-background);
  border-color: var(--color-feedback-neutral-low-border);
}
nv-badge.badge-neutral .close:focus, nv-badge.badge-neutral .close:focus-within {
  outline: none;
}
nv-badge.badge-neutral .close:focus-visible, nv-badge.badge-neutral .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-neutral-low-content, var(--color-feedback-neutral-low-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-neutral nv-icon {
  color: var(--color-feedback-neutral-low-icon);
}
nv-badge.badge-success {
  color: var(--color-feedback-success-low-text);
  background-color: var(--color-feedback-success-low-background);
  border-color: var(--color-feedback-success-low-border);
}
nv-badge.badge-success .close:focus, nv-badge.badge-success .close:focus-within {
  outline: none;
}
nv-badge.badge-success .close:focus-visible, nv-badge.badge-success .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-success-low-content, var(--color-feedback-success-low-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-success nv-icon {
  color: var(--color-feedback-success-low-icon);
}
nv-badge.badge-warning {
  color: var(--color-feedback-warning-low-text);
  background-color: var(--color-feedback-warning-low-background);
  border-color: var(--color-feedback-warning-low-border);
}
nv-badge.badge-warning .close:focus, nv-badge.badge-warning .close:focus-within {
  outline: none;
}
nv-badge.badge-warning .close:focus-visible, nv-badge.badge-warning .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-warning-low-content, var(--color-feedback-warning-low-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-warning nv-icon {
  color: var(--color-feedback-warning-low-icon);
}
nv-badge.badge-amber {
  color: var(--color-rainbow-1-text);
  background-color: var(--color-rainbow-1-background);
  border-color: var(--color-rainbow-1-border);
}
nv-badge.badge-amber .close:focus, nv-badge.badge-amber .close:focus-within {
  outline: none;
}
nv-badge.badge-amber .close:focus-visible, nv-badge.badge-amber .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-amber-content, var(--color-rainbow-1-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-amber nv-icon {
  color: var(--color-rainbow-1-icon);
}
nv-badge.badge-orange {
  color: var(--color-rainbow-2-text);
  background-color: var(--color-rainbow-2-background);
  border-color: var(--color-rainbow-2-border);
}
nv-badge.badge-orange .close:focus, nv-badge.badge-orange .close:focus-within {
  outline: none;
}
nv-badge.badge-orange .close:focus-visible, nv-badge.badge-orange .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-orange-content, var(--color-rainbow-2-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-orange nv-icon {
  color: var(--color-rainbow-2-icon);
}
nv-badge.badge-turquoise {
  color: var(--color-rainbow-5-text);
  background-color: var(--color-rainbow-5-background);
  border-color: var(--color-rainbow-5-border);
}
nv-badge.badge-turquoise .close:focus, nv-badge.badge-turquoise .close:focus-within {
  outline: none;
}
nv-badge.badge-turquoise .close:focus-visible, nv-badge.badge-turquoise .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-turquoise-content, var(--color-rainbow-5-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-turquoise nv-icon {
  color: var(--color-rainbow-5-icon);
}
nv-badge.badge-crimson {
  color: var(--color-rainbow-6-text);
  background-color: var(--color-rainbow-6-background);
  border-color: var(--color-rainbow-6-border);
}
nv-badge.badge-crimson .close:focus, nv-badge.badge-crimson .close:focus-within {
  outline: none;
}
nv-badge.badge-crimson .close:focus-visible, nv-badge.badge-crimson .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-crimson-content, var(--color-rainbow-6-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-crimson nv-icon {
  color: var(--color-rainbow-6-icon);
}
nv-badge.badge-lime {
  color: var(--color-rainbow-9-text);
  background-color: var(--color-rainbow-9-background);
  border-color: var(--color-rainbow-9-border);
}
nv-badge.badge-lime .close:focus, nv-badge.badge-lime .close:focus-within {
  outline: none;
}
nv-badge.badge-lime .close:focus-visible, nv-badge.badge-lime .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-lime-content, var(--color-rainbow-9-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-lime nv-icon {
  color: var(--color-rainbow-9-icon);
}
nv-badge.badge-petrol {
  color: var(--color-rainbow-8-text);
  background-color: var(--color-rainbow-8-background);
  border-color: var(--color-rainbow-8-border);
}
nv-badge.badge-petrol .close:focus, nv-badge.badge-petrol .close:focus-within {
  outline: none;
}
nv-badge.badge-petrol .close:focus-visible, nv-badge.badge-petrol .close:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-petrol-content, var(--color-rainbow-8-text));
  outline-offset: calc(var(--focus-outline-offset) * 0.2);
}
nv-badge.badge-petrol nv-icon {
  color: var(--color-rainbow-8-icon);
}
nv-badge .nv-badge-leading {
  display: contents;
}
nv-badge .nv-badge-label {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs) !important;
  text-align: center;
}
nv-badge nv-icon > svg.icon-xs {
  width: var(--spacing-3);
  height: var(--spacing-3);
  stroke-width: 1.2px;
}
nv-badge nv-icon > svg.icon-sm {
  width: var(--spacing-3);
  height: var(--spacing-3);
  stroke-width: 1.2px;
}
nv-badge nv-icon > svg.icon-md {
  width: var(--spacing-3);
  height: var(--spacing-3);
  stroke-width: 1.2px;
}
nv-badge nv-icon > svg.icon-lg {
  width: var(--spacing-3);
  height: var(--spacing-3);
  stroke-width: 1.2px;
}
nv-badge nv-icon > svg.icon-xl {
  width: var(--spacing-3);
  height: var(--spacing-3);
  stroke-width: 1.2px;
}
nv-badge .close {
  padding: 0;
  line-height: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: var(--radius-rounded-full);
}