.tag {
  display: inline-flex;
  width: fit-content;
  flex-direction: row;
  align-items: center;
  gap: var(--space--xx-small);
  padding: 0.125rem 0.5rem;
  white-space: nowrap;
  border-radius: var(--space--large);

  font-size: var(--font-size--x-small);
  font-weight: var(--font-weight--bold);
  line-height: 125%;
}

.tag--small {
  padding: 0.0625rem 0.25rem;
  font-size: var(--font-size--xx-small);
}

.tag--with-icon {
  padding-left: 0.25rem;
}

.tag--general {
  background-color: var(--color--grayscale--03);
  color: var(--color--text);
}

.tag--info {
  background-color: var(--color--ui-info-light);
  color: var(--color--ui-info-dark);
}

.tag--success {
  background-color: var(--color--ui-success-light);
  color: var(--color--ui-success-dark);
}

.tag--warning {
  background-color: var(--color--ui-warning-light);
  color: var(--color--ui-warning-dark);
}

.tag--danger {
  background-color: var(--color--ui-danger-light);
  color: var(--color--ui-danger-dark);
}

.tag--variable {
  margin: 0;
  padding: 0 var(--space--xx-small);

  font-weight: var(--font-weight--normal);
  border-radius: 0.125rem;

  background-color: var(--color--ui-variable-light);
  color: var(--color--ui-variable-dark);
}