:root {
  --filters-icon-color: var(--color-orange);
  --filters-icon-rotate: 0deg;
  --filters-line-color: var(--color-grey-light);
}

.filters {
  display: grid;
  gap: 4rem;
}

.filters__filter {
  border-block: 2px solid var(--filters-line-color);
  padding-block: 1rem;

  &[open] {
    --filters-icon-rotate: 180deg;
  }

  &:not(:last-child) {
    border-block-end: 0;
  }

  &:has(.filters__filter-summary) {
    padding-block: 2rem;
  }
}

.filters__filter-summary {
  appearance: none;
  display: block;
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  user-select: none;

  &::-webkit-details-marker,
  &::marker {
    display: none;
  }
}

.filters__filter-summary-inner {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.filters__filter-summary-icon {
  color: var(--filters-icon-color);
  flex-shrink: 0;
  font-size: 3rem;
  line-height: 0;
  transform: rotate(var(--filters-icon-rotate));
  transition-property: transform;
}

.filters__filter-fields {
  padding-block: 1.5rem;
}

.filters__filter-field {
  & + & {
    margin-block-start: 2rem;
  }
}

.filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}