@roadtrip/css/styles/components/_badge.css

CSS framework for Roadtrip Design System

/*
 * Badge
 *
 * Index
 * - Badge
 * - Status
 *
 */


/* BADGE
 -------------------- */

.badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  min-height: 1rem;
  padding: 0 0.3125rem;
  font-family: var(--road-font);
  font-size: var(--road-font-size-10);
  font-weight: 700;
  color: var(--road-on-primary);
  white-space: nowrap;
  background-color: var(--road-primary);
  border-radius: 1rem;
}

/**
 * Empty badge
 */

.badge:empty {
  min-width: 0.25rem;
  min-height: 0.25rem;
  padding: 0;
}

/* STATUS
 -------------------- */

/**
 * Primary
 */

.badge-primary {
  color: var(--road-on-primary);
  background-color: var(--road-primary);
}

/**
 * Secondary
 */

.badge-secondary {
  color: var(--road-on-secondary);
  background-color: var(--road-secondary);
}

/**
 * Accent
 */

.badge-accent {
  color: var(--road-on-warning-surface-inverse);
  background-color: var(--road-warning-surface-inverse);
}

/**
 * Info
 */

.badge-info {
  color: var(--road-on-info-surface-inverse);
  background-color: var(--road-info-surface-inverse);
}

/**
 * Success
 */

.badge-success {
  color: var(--road-on-success-surface-inverse);
  background-color: var(--road-success-surface-inverse);
}

/**
 * Warning
 */

.badge-warning {
  color: var(--road-on-warning-surface-inverse);
  background-color: var(--road-warning-surface-inverse);
}

/**
 * Danger
 */

.badge-danger {
  color: var(--road-on-danger-surface-inverse);
  background-color: var(--road-danger-surface-inverse);
}

/**
 * Inverse
 */

.badge-inverse {
  color: var(--road-primary);
  background-color: var(--road-surface);
}