[data-listfilter-section] .listfilter-form fieldset {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-listfilter-section] .listfilter-form fieldset:focus-within {
  border-color: color-mix(in srgb, var(--color-primary-500, #6366f1) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #6366f1) 12%, transparent);
}

[data-listfilter-section] .listfilter-form input[type='number']:focus {
  outline: none;
  border-color: var(--color-primary-500, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #6366f1) 15%, transparent);
}

[data-listfilter-section] .listfilter-color-option--active {
  border-color: var(--color-primary-500, #6366f1) !important;
  background: color-mix(in srgb, var(--color-primary-500, #6366f1) 10%, transparent);
}

[data-listfilter-section] .listfilter-collapsible-legend {
  cursor: pointer;
  user-select: none;
}

[data-listfilter-section] .listfilter-collapsible-legend::after {
  content: '−';
  margin-left: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.55;
}

[data-listfilter-section] .listfilter-fieldset--collapsed .listfilter-collapsible-legend::after {
  content: '+';
}

[data-listfilter-section] .listfilter-fieldset--collapsed > :not(legend) {
  display: none;
}

[data-listfilter-section] .listfilter-form button[type='submit']:focus-visible,
[data-listfilter-section] .listfilter-form a:focus-visible {
  outline: 2px solid var(--color-primary-500, #6366f1);
  outline-offset: 2px;
}