.navds-tag {
  --__ac-tag-icon-size: 1.5rem;
  --__ac-tag-icon-margin: -2px;

  border: 1px solid;
  border-radius: var(--a-border-radius-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--a-spacing-05) var(--a-spacing-2);
  min-height: 2rem;
  line-height: 1;
}

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

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

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

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

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

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

.navds-tag--error {
  border-color: var(--ac-tag-error-border, var(--a-border-danger));
  background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
  color: var(--ac-tag-error-text, var(--a-text-default));
}

.navds-tag--error-filled {
  border-color: transparent;
  background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
  color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
}

.navds-tag--error-moderate {
  border-color: transparent;
  background-color: var(--ac-tag-error-moderate-bg, var(--a-surface-danger-moderate));
  color: var(--ac-tag-error-moderate-text, var(--a-text-default));
}

.navds-tag--success {
  border-color: var(--ac-tag-success-border, var(--a-border-success));
  background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
  color: var(--ac-tag-success-text, var(--a-text-default));
}

.navds-tag--success-filled {
  border-color: transparent;
  background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
  color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
}

.navds-tag--success-moderate {
  border-color: transparent;
  background-color: var(--ac-tag-success-moderate-bg, var(--a-surface-success-moderate));
  color: var(--ac-tag-success-moderate-text, var(--a-text-default));
}

.navds-tag--warning {
  border-color: var(--ac-tag-warning-border, var(--a-border-warning));
  background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
  color: var(--ac-tag-warning-text, var(--a-text-default));
}

.navds-tag--warning-filled {
  border-color: transparent;
  background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
  color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
}

.navds-tag--warning-moderate {
  border-color: transparent;
  background-color: var(--ac-tag-warning-moderate-bg, var(--a-surface-warning-moderate));
  color: var(--ac-tag-warning-moderate-text, var(--a-text-default));
}

.navds-tag--info {
  border-color: var(--ac-tag-info-border, var(--a-border-info));
  background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
  color: var(--ac-tag-info-text, var(--a-text-default));
}

.navds-tag--info-filled {
  border-color: transparent;
  background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
  color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
}

.navds-tag--info-moderate {
  border-color: transparent;
  background-color: var(--ac-tag-info-moderate-bg, var(--a-surface-info-moderate));
  color: var(--ac-tag-info-moderate-text, var(--a-text-default));
}

.navds-tag--neutral {
  border-color: var(--ac-tag-neutral-border, var(--a-border-default));
  background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
  color: var(--ac-tag-neutral-text, var(--a-text-default));
}

.navds-tag--neutral-filled {
  border-color: transparent;
  background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
  color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
}

.navds-tag--neutral-moderate {
  border-color: transparent;
  background-color: var(--ac-tag-neutral-moderate-bg, var(--a-surface-neutral-moderate));
  color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
}

.navds-tag--alt1,
.navds-tag--outline.navds-tag--meta-purple {
  border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
  background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
  color: var(--ac-tag-alt-1-text, var(--a-text-default));
}

.navds-tag--alt1-filled,
.navds-tag--strong.navds-tag--meta-purple {
  border-color: transparent;
  background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
  color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
}

.navds-tag--alt1-moderate,
.navds-tag--moderate.navds-tag--meta-purple {
  border-color: transparent;
  background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
  color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
}

.navds-tag--alt2,
.navds-tag--outline.navds-tag--meta-lime {
  border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
  background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
  color: var(--ac-tag-alt-2-text, var(--a-text-default));
}

.navds-tag--alt2-filled,
.navds-tag--strong.navds-tag--meta-lime {
  border-color: transparent;
  background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
  color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
}

.navds-tag--alt2-moderate,
.navds-tag--moderate.navds-tag--meta-lime {
  border-color: transparent;
  background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
  color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));
}

.navds-tag--alt3 {
  border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
  background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
  color: var(--ac-tag-alt-3-text, var(--a-text-default));
}

.navds-tag--alt3-filled {
  border-color: transparent;
  background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
  color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
}

.navds-tag--alt3-moderate {
  border-color: transparent;
  background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
  color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
}

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

  .navds-tag--neutral,
  .navds-tag--neutral-moderate {
    border-color: canvastext;
    color: canvastext;
  }
}
