/*
***************
* quick filter
***************
*/
.quick-filter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 768px) {
  .quick-filter {
    gap: 12px;
  }
}

.quick-filter .quick-filter-item {
  align-items: center;
  background-color: var(--white, #ffffff);
  border: 1px solid var(--gray-400, #9b9b9b);
  border-radius: var(--border-radius, 0);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  line-height: 1.2;
  padding: 12px;
  text-decoration: none;
  transition: var(--transition-base, all 0.3s ease-in-out);
  user-select: none;
}

.quick-filter .quick-filter-item:hover,
.quick-filter .quick-filter-item:focus {
  border-color: var(--gray-600, #525252);
  color: inherit;
  text-decoration: none;
}

/* inset shadow adds the second border pixel without resizing the box */
.quick-filter .quick-filter-item.is-active {
  border-color: var(--primary, #e21838);
  box-shadow: inset 0 0 0 1px var(--primary, #e21838) !important;
}

.quick-filter .quick-filter-placeholder {
  color: var(--gray-600, #525252);
  font-style: italic;
}

.quick-filter.is-loading {
  opacity: 0.6;
  pointer-events: none;
}