/* Swatch colors for the Color Group chips so each option matches its hue. */
.color-chip {
  --chip-bg: #fafafa;
  --chip-text: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background-color: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  padding: 6px 10px;
  width: 136px;
  transition: transform 60ms ease, filter 120ms ease;
}

.color-chip:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.color-chip.selected {
  filter: brightness(0.9);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
  border-color: #000000;
}

.filter-panel-container .filter-category-items .color-group-choices .color-chip {
  /* Preserve existing styling inside the filter panel */
}

@media only screen and (max-width: 1000px) {
  .color-chip {
    width: 118px;
  }
}

.color-chip[data-color-key="red" i],
.color-chip[data-color-label="red" i] {
  --chip-bg: #c02030;
  --chip-text: #ffffff;
}

.color-chip[data-color-key="red-orange" i],
.color-chip[data-color-key="red_orange" i],
.color-chip[data-color-label="red-orange" i],
.color-chip[data-color-label="red_orange" i] {
  --chip-bg: #d13a1f;
  --chip-text: #ffffff;
}

.color-chip[data-color-key="orange" i],
.color-chip[data-color-label="orange" i] {
  --chip-bg: #f47a1f;
  --chip-text: #1f1f1f;
}

.color-chip[data-color-key="pink-orange" i],
.color-chip[data-color-key="pink_orange" i],
.color-chip[data-color-label="pink-orange" i],
.color-chip[data-color-label="pink_orange" i] {
  --chip-bg: #f6a07a;
  --chip-text: #1f1f1f;
}

.color-chip[data-color-key="orange-yellow" i],
.color-chip[data-color-key="orange_yellow" i],
.color-chip[data-color-label="orange-yellow" i],
.color-chip[data-color-label="orange_yellow" i] {
  --chip-bg: #f4c542;
  --chip-text: #1f1f1f;
}

.color-chip[data-color-key="yellow" i],
.color-chip[data-color-label="yellow" i] {
  --chip-bg: #f7e45a;
  --chip-text: #1f1f1f;
}

.color-chip[data-color-key="yellow-green" i],
.color-chip[data-color-key="yellow_green" i],
.color-chip[data-color-label="yellow-green" i],
.color-chip[data-color-label="yellow_green" i] {
  --chip-bg: #b7d64b;
  --chip-text: #0f172a;
}

.color-chip[data-color-key="green" i],
.color-chip[data-color-label="green" i] {
  --chip-bg: #1f8a3a;
  --chip-text: #ffffff;
}

.color-chip[data-color-key="green-blue" i],
.color-chip[data-color-key="green_blue" i],
.color-chip[data-color-label="green-blue" i],
.color-chip[data-color-label="green_blue" i] {
  --chip-bg: #1e988f;
  --chip-text: #ffffff;
}

.color-chip[data-color-key="blue" i],
.color-chip[data-color-label="blue" i] {
  --chip-bg: #2566c2;
  --chip-text: #ffffff;
}

.color-chip[data-color-key="blue-violet" i],
.color-chip[data-color-key="blue_violet" i],
.color-chip[data-color-label="blue-violet" i],
.color-chip[data-color-label="blue_violet" i] {
  --chip-bg: #4b5edb;
  --chip-text: #ffffff;
}

.color-chip[data-color-key="violet" i],
.color-chip[data-color-label="violet" i] {
  --chip-bg: #7c5bd6;
  --chip-text: #ffffff;
}

.color-chip[data-color-key="purple" i],
.color-chip[data-color-label="purple" i] {
  --chip-bg: #8a2e83;
  --chip-text: #ffffff;
}

.color-chip[data-color-key="pink" i],
.color-chip[data-color-label="pink" i] {
  --chip-bg: #eb76b5;
  --chip-text: #1f1f1f;
}

.color-chip[data-color-key="brown" i],
.color-chip[data-color-label="brown" i] {
  --chip-bg: #8a5a2e;
  --chip-text: #ffffff;
}

.color-chip[data-color-key="grey" i],
.color-chip[data-color-key="gray" i],
.color-chip[data-color-label="grey" i],
.color-chip[data-color-label="gray" i] {
  --chip-bg: #7a7a7a;
  --chip-text: #ffffff;
}

.color-chip[data-color-key="white-colorless" i],
.color-chip[data-color-key="white_colorless" i],
.color-chip[data-color-label="white-colorless" i],
.color-chip[data-color-label="white_colorless" i] {
  --chip-bg: #f5f5f5;
  --chip-text: #1f1f1f;
  border-color: #d6d6d6;
}