.navds-tag {
  --__axc-tag-icon-size: 1.5rem;
  --__axc-tag-icon-margin: -2px;
  --__axc-tag-border: ;
  --__axc-tag-bg: ;
  --__axc-tag-bg-strong: ;
  --__axc-tag-text: ;
  --__axc-tag-text-strong: ;

  border-radius: var(--ax-border-radius-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ax-spacing-05) var(--ax-spacing-2);
  min-height: 2rem;
  line-height: 1;

  &:has(.navds-tag__icon--left) {
    gap: var(--ax-spacing-05);
  }
}

.navds-tag--info,
.navds-tag--alt3 {
  --__axc-tag-border: var(--ax-border-info);
  --__axc-tag-bg: var(--ax-bg-info-moderateA);
  --__axc-tag-bg-strong: var(--ax-bg-info-strong);
  --__axc-tag-text: var(--ax-text-info-strong);
  --__axc-tag-text-strong: var(--ax-text-info-contrast);
}

.navds-tag--success {
  --__axc-tag-border: var(--ax-border-success);
  --__axc-tag-bg: var(--ax-bg-success-moderateA);
  --__axc-tag-bg-strong: var(--ax-bg-success-strong);
  --__axc-tag-text: var(--ax-text-success-strong);
  --__axc-tag-text-strong: var(--ax-text-success-contrast);
}

.navds-tag--warning {
  --__axc-tag-border: var(--ax-border-warning);
  --__axc-tag-bg: var(--ax-bg-warning-moderateA);
  --__axc-tag-bg-strong: var(--ax-bg-warning-strong);
  --__axc-tag-text: var(--ax-text-warning-strong);
  --__axc-tag-text-strong: var(--ax-text-warning-contrast);
}

.navds-tag--error {
  --__axc-tag-border: var(--ax-border-danger);
  --__axc-tag-bg: var(--ax-bg-danger-moderateA);
  --__axc-tag-bg-strong: var(--ax-bg-danger-strong);
  --__axc-tag-text: var(--ax-text-danger-strong);
  --__axc-tag-text-strong: var(--ax-text-danger-contrast);
}

.navds-tag--neutral {
  --__axc-tag-border: var(--ax-border-neutral);
  --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
  --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
  --__axc-tag-text: var(--ax-text-neutral-strong);
  --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
}

.navds-tag--meta-purple,
.navds-tag--alt1 {
  --__axc-tag-border: var(--ax-border-meta-purple);
  --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
  --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
  --__axc-tag-text: var(--ax-text-meta-purple-strong);
  --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
}

.navds-tag--meta-lime,
.navds-tag--alt2 {
  --__axc-tag-border: var(--ax-border-meta-lime);
  --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
  --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
  --__axc-tag-text: var(--ax-text-meta-lime-strong);
  --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
}

.navds-tag--small {
  min-height: 1.5rem;
  padding: 0 var(--ax-spacing-1-alt);

  --__axc-tag-icon-size: 1.25rem;
}

.navds-tag--xsmall {
  min-height: 1.25rem;
  padding: 0 var(--ax-spacing-1);

  --__axc-tag-icon-size: 1rem;
  --__axc-tag-icon-margin: -1px;
}

.navds-tag__icon--left {
  font-size: var(--__axc-tag-icon-size);
  margin-inline-start: var(--__axc-tag-icon-margin);
  display: flex;
}

.navds-tag--outline {
  box-shadow: inset 0 0 0 1px var(--__axc-tag-border);
  background: var(--__axc-tag-bg);
  color: var(--__axc-tag-text);
}

.navds-tag--moderate {
  background: var(--__axc-tag-bg);
  color: var(--__axc-tag-text);
}

.navds-tag--strong {
  background: var(--__axc-tag-bg-strong);
  color: var(--__axc-tag-text-strong);
}

@media (forced-colors: active) {
  .navds-tag {
    forced-color-adjust: none;
    color: canvastext;
  }

  .navds-tag--moderate {
    box-shadow: inset 0 0 0 1px var(--__axc-tag-bg-strong);
  }

  .navds-tag--strong {
    color: canvas;
  }
}
