.filter-button,
.tag {
  --tag-bg: #f0f3f1;
  --tag-fg: #59655f;
  --tag-border: #dce4df;
}

.filter-button {
  border-color: var(--tag-border);
  background: var(--tag-bg);
  color: var(--tag-fg);
}

.filter-button.active {
  border-color: var(--tag-fg);
  background: var(--tag-fg);
  color: #fff;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--tag-fg) 24%, transparent);
}

.tag {
  border: 1px solid var(--tag-border);
  background: var(--tag-bg);
  color: var(--tag-fg);
  font-weight: 650;
}

.district-all { --tag-bg: #edf1ef; --tag-fg: #34423b; --tag-border: #cfd8d3; }
.district-donghu { --tag-bg: #e8f5ed; --tag-fg: #176b40; --tag-border: #b9ddc8; }
.district-xihu { --tag-bg: #e9f1fb; --tag-fg: #245f9e; --tag-border: #bfd3ec; }
.district-qingyunpu { --tag-bg: #f3ecfb; --tag-fg: #7042a0; --tag-border: #d8c3ee; }
.district-qingshanhu { --tag-bg: #e7f6f6; --tag-fg: #176d72; --tag-border: #b5dddd; }
.district-honggutan { --tag-bg: #fcebed; --tag-fg: #a43e4b; --tag-border: #efc0c6; }
.district-xinjian { --tag-bg: #fff2e5; --tag-fg: #9a551d; --tag-border: #edcfad; }
.district-nanchang { --tag-bg: #fff7db; --tag-fg: #806000; --tag-border: #eadb9c; }
.district-other { --tag-bg: #f1f1f4; --tag-fg: #5e6070; --tag-border: #d3d4db; }

.tag.recommend { --tag-bg: #fff3cf; --tag-fg: #815c00; --tag-border: #ebd28c; }
.tag.community { --tag-bg: #eef5fb; --tag-fg: #285f8f; --tag-border: #b8cce0; }
.tag.reviews { --tag-bg: #e8f0ff; --tag-fg: #315ca8; --tag-border: #bfd0f1; }
.tag.rating-tag-avoid { --tag-bg: #fce8e7; --tag-fg: #a93632; --tag-border: #efb9b6; }
.tag.rating-tag-okay { --tag-bg: #fff1d8; --tag-fg: #8a5b00; --tag-border: #ead09b; }
.tag.rating-tag-strong { --tag-bg: #e4f4e9; --tag-fg: #176b40; --tag-border: #b4dbc2; }

@supports not (color: color-mix(in srgb, black, white)) {
  .filter-button.active { box-shadow: 0 2px 7px rgba(23, 33, 28, .18); }
}