div#filter_bar,
div#sorting_select {
  margin-top: var(--spacing-2);
}

.filter-input {
  margin: var(--spacing-2) 0;

  label:not(:has(input[type="checkbox"])) {
    display: block;
    font-weight: bold;
    font-size: var(--font-size_medium);
    margin-bottom: var(--spacing-2);
  }

  label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    cursor: pointer;
  }

  &:has(select):not(:last-child) {
    margin-bottom: var(--spacing-4);
  }
}

.applied-filters {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: var(--spacing-2) 0 var(--spacing-4) 0;
}

.applied-filter {
  display: inline-flex;
  justify-content: space-between;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius_medium);
  border: 1px solid var(--border-color);
  background-color: var(--tag-active-background-color);
  color: var(--tag-active-text-color);
  white-space: nowrap;
  font-weight: normal;

  .applied-filter-label {
    font-weight: var(--font-weight_bold);
  }

  .dismiss-filter {
    display: inline-flex;
    justify-content: center;
    width: var(--spacing-4);
    color: var(--tag-active-text-color);
  }
}
