@media (max-width: 639px) {
  .ids-desktop {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .ids-mobile {
    display: none !important;
  }
}

.ids-badge {
  display: inline;
}
.ids-badge .ids-badge__inner {
  line-height: 1rem;
  box-sizing: border-box;
  padding: var(--IDS-BADGE__PADDING-DESKTOP);
  display: inline-flex;
  align-items: center;
  justify-items: center;
  font-size: 0.75rem;
  font-weight: 400;
  border-radius: 0.313rem;
  font-family: var(--IDS-FONT-FAMILY-BASE);
}
.ids-badge .ids-badge__icon {
  margin-right: 0.5rem;
  display: flex;
}
.ids-badge.ids-badge--primary .ids-badge__inner {
  background-color: var(--IDS-BADGE--PRIMARY__BACKGROUND-COLOR);
  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--PRIMARY__BORDER-COLOR);
  color: var(--IDS-BADGE--PRIMARY__COLOR);
}
.ids-badge.ids-badge--secondary .ids-badge__inner {
  background-color: var(--IDS-BADGE--SECONDARY__BACKGROUND-COLOR);
  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--SECONDARY__BORDER-COLOR);
  color: var(--IDS-BADGE--SECONDARY__COLOR);
}
.ids-badge.ids-badge--neutral .ids-badge__inner {
  background-color: var(--IDS-BADGE--NEUTRAL__BACKGROUND-COLOR);
  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--NEUTRAL__BORDER-COLOR);
  color: var(--IDS-BADGE--NEUTRAL__COLOR);
}
.ids-badge.ids-badge--info .ids-badge__inner {
  background-color: var(--IDS-BADGE--INFO__BACKGROUND-COLOR);
  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--INFO__BORDER-COLOR);
  color: var(--IDS-BADGE--INFO__COLOR);
}
.ids-badge.ids-badge--attention .ids-badge__inner {
  background-color: var(--IDS-BADGE--ATTENTION__BACKGROUND-COLOR);
  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--ATTENTION__BORDER-COLOR);
  color: var(--IDS-BADGE--ATTENTION__COLOR);
}
.ids-badge.ids-badge--success .ids-badge__inner {
  background-color: var(--IDS-BADGE--SUCCESS__BACKGROUND-COLOR);
  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--SUCCESS__BORDER-COLOR);
  color: var(--IDS-BADGE--SUCCESS__COLOR);
}
.ids-badge.ids-badge--error .ids-badge__inner {
  background-color: var(--IDS-BADGE--ERROR__BACKGROUND-COLOR);
  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--ERROR__BORDER-COLOR);
  color: var(--IDS-BADGE--ERROR__COLOR);
}
@media (min-width: 1024px) {
  .ids-badge .ids-badge__inner {
    padding: var(--IDS-BADGE__PADDING-MOBILE);
    font-size: 0.875rem;
  }
}