.legend-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
  color: var(--grey-700);
}

.legend-toggle.active {
  color: var(--black)
}

.legend-toggle__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--grey-200);
  background: transparent;
  transition: var(--transition);
}

.legend-toggle.active .legend-toggle__icon {
  border-color: currentColor;
  position: relative;
  background-color: currentColor;
}

.legend-toggle.active .legend-toggle__icon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjQ0NTUgNC4xNjQwNkw1LjMzNDQyIDEwLjI3NTJMMi41NTY2NCA3LjQ5NzQiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  filter: brightness(2);
}

.legend-toggle:hover {
  border-color: var(--grey-300);
}

.legend-toggle.active:hover {
  border-color: var(--grey-300);
}