/**
 * Do not edit directly, this file was auto-generated.
 */
.jkl-tag {
  --padding: var(--jkl-unit-02) var(--jkl-unit-10);
  --gap: var(--jkl-unit-05);
  --background-color: var(--jkl-color-background-alert-neutral);
  --text-color: var(--jkl-color-text-on-alert);
  font-size: var(--jkl-font-size-2);
  line-height: var(--jkl-line-height-tight);
  font-weight: 400;
  --jkl-icon-weight: 300;
  font-weight: 700;
  background-color: var(--background-color);
  color: var(--text-color);
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: var(--padding);
  gap: var(--gap);
}
.jkl-tag--info {
  --background-color: var(--jkl-color-background-alert-info);
}
.jkl-tag--warning {
  --background-color: var(--jkl-color-background-alert-warning);
}
.jkl-tag--error {
  --background-color: var(--jkl-color-background-alert-error);
}
.jkl-tag--success {
  --background-color: var(--jkl-color-background-alert-success);
}
@media screen and (forced-colors: active) {
  .jkl-tag {
    border: 2px none CanvasText;
    border-bottom-style: dotted;
  }
  .jkl-tag--info {
    border-style: dotted;
  }
  .jkl-tag--warning {
    border-style: dashed;
  }
  .jkl-tag--error {
    border-style: double;
    border-width: 4px;
  }
  .jkl-tag--success {
    border-style: solid;
  }
}