.tag {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space--xx-small);
  padding: 0.125rem 0.5rem;
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--bold);
  border-radius: var(--space--large);
}

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

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

.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);
}