/* Legend bar and missing chips */
/* ============================ */
/*
  The bar of chips an event shows for what it's missing - see gear/calendar/_missing_chip,
  and gear/itemgrid/header/_event_legend_keys, which reuses the same bar. Moved here from the old events page's stylesheets, which are gone;
  the class names are kept as they were.
*/

.event-legend {
  display: flex;
  flex-direction: row;
  column-gap: 3rem;
  justify-content: start;

  background-color: var(--bs-secondary-bg);

  @media(width <=768px) {
    justify-content: center;
  }
}

.event-legend__row {
  flex-shrink: 1;

  display: flex;
  flex-direction: row;
  column-gap: 0.25rem;

  font-size: 0.85rem;
  font-weight: 750;

  padding: 0.5rem;

  margin-bottom: 0.5rem;

  @media (width <=768px) {
    padding: 0.25rem;
  }
}

/* One missing chip */
.event-badge {
  font-size: 0.65rem;

  color: var(--bs-emphasis-color);

  font-weight: 600;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  @media (width <=768px) {
    font-size: 0.6rem;
    font-weight: 500 !important;
  }
}

.event-badge--missing {
  border: 1px solid var(--bs-danger);
  background-color: var(--bs-danger-bg-subtle);
}