/* Styles for the side filters panel of the search results. Every rule hangs from the 'side-filters' host
   element to scope it to the component. */

/* Empty state: the search returned no facets. inline-size containment keeps its text out of the panel's
   intrinsic width, so the panel stays as narrow as it is with filters instead of growing to fit the sentence. */
side-filters .side-filters__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-spacing-3xs);
  /* no token for the top: the spacing ramp ends at 64px; 25vh drops it to the upper third of the screen */
  padding: 25vh var(--md-spacing-xs) var(--md-spacing-lg);
  color: var(--md-content-tertiary);
  text-align: center;
  contain: inline-size;
}

side-filters .side-filters__empty-icon {
  font-size: var(--md-font-size-8);
}

side-filters .side-filters__empty > p {
  margin: var(--md-spacing-none);
}

side-filters .side-filters__empty-title {
  font-family: var(--md-text-heading-xs-font-family);
  font-size: var(--md-text-heading-xs-font-size);
  font-weight: var(--md-text-heading-xs-bold-font-weight);
  line-height: var(--md-text-heading-xs-line-height);
  letter-spacing: var(--md-text-heading-xs-letter-spacing);
}

side-filters .side-filters__empty-description {
  font-family: var(--md-text-body-sm-font-family);
  font-size: var(--md-text-body-sm-font-size);
  font-weight: var(--md-text-body-sm-regular-font-weight);
  line-height: var(--md-text-body-sm-line-height);
  letter-spacing: var(--md-text-body-sm-letter-spacing);
}

/* Titled filter group (checkbox, radio, date, dateRange): shared shell */
side-filters .side-filters__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--md-spacing-3xs);
  padding: var(--md-spacing-3xs) 0;
}

side-filters .side-filters__group-title {
  margin: var(--md-spacing-none);
  color: var(--md-content-secondary);
  font-family: var(--md-text-heading-xs-font-family);
  font-size: var(--md-text-heading-xs-font-size);
  font-weight: var(--md-text-heading-xs-bold-font-weight);
  line-height: var(--md-text-heading-xs-line-height);
  letter-spacing: var(--md-text-heading-xs-letter-spacing);
}

side-filters .side-filters__values,
side-filters .side-filters__classification {
  align-self: stretch;
}

side-filters .side-filters__value {
  display: flex;
  justify-content: flex-start;
  padding: var(--md-spacing-4xs);
}

/* Hover over the panel's white surface: the global .hoverable uses the secondary-surface hover, a step too dark here */
side-filters .side-filters__value.hoverable:hover,
side-filters .side-filters__toggle-values.hoverable:hover {
  background-color: var(--md-background-hover);
}

side-filters .side-filters__value--disabled {
  color: var(--md-content-disabled);
}

/* Counts stay neutral so the list reads calmly; only the applied values keep the tag-2xs emphasis. The border
   is transparent when selected so both states measure the same and the row does not shift on toggle. */
side-filters .side-filters__count {
  border: var(--md-border-width-sm) solid var(--md-border-subtle);
  background: var(--md-background-primary);
  color: var(--md-content-secondary);
}

side-filters .side-filters__count.side-filters__count--selected {
  border-color: transparent;
  background: var(--md-background-tertiary);
  color: var(--md-content-brand-primary);
}

side-filters .side-filters__toggle-values {
  color: var(--md-content-brand-primary);
  font-weight: var(--md-text-body-mn-bold-font-weight);
}

/* dateRange: from / to */
side-filters .side-filters__date-range {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-3xs);
  align-self: stretch;
}

/* Label stacked above its input */
side-filters .side-filters__date-range-row {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-4xs);
}