/**
 * 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-container);
  --text-color: var(--jkl-color-text-default);
  --border-color: var(--jkl-color-border-subdued);
  font: var(--jkl-text-style-text-small);
  font-weight: var(--jkl-font-weight-bold);
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-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-info-background-container-accent);
  --text-color: var(--jkl-color-info-text-default);
  --border-color: var(--jkl-color-info-border-subdued);
}
.jkl-tag--warning {
  --background-color: var(--jkl-color-warning-background-container-accent);
  --text-color: var(--jkl-color-warning-text-default);
  --border-color: var(--jkl-color-warning-border-subdued);
}
.jkl-tag--error {
  --background-color: var(--jkl-color-error-background-container-accent);
  --text-color: var(--jkl-color-error-text-default);
  --border-color: var(--jkl-color-error-border-subdued);
}
.jkl-tag--success {
  --background-color: var(--jkl-color-success-background-container-accent);
  --text-color: var(--jkl-color-success-text-default);
  --border-color: var(--jkl-color-success-border-subdued);
}
@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;
  }
}