.modal-facets {
  .modal__body {
    display: flex;
    flex-direction: column;

    .facets {
      overflow-y: auto;
      /** hide scrollbar */
      &::-webkit-scrollbar,
      &::-webkit-scrollbar-thumb,
      &::-webkit-scrollbar-track {
        display: none;
      }

      .accordion__wrapper {
        padding: 0.75rem 0;
        background-color: transparent;
        border: none;
        border-radius: unset;
        border-top: 1px solid var(--theme-color-grey-2);

        .accordion__content {
          position: relative;
          inset: unset;

          > * {
            padding: 1rem 0 0.25rem;
            background-color: transparent;
            border: none;
          }
        }

        &:has(.accordion__content.active) {
          .accordion__button {
            color: var(--theme-color-primary);
          }

          [data-filter-clear],
          .active-filters {
            display: none;
          }
        }

        .filter-clear {
          position: absolute;
          /* 24px + 4px margin-right */
          right: 1.75rem;
          top: 50%;
          transform: translateY(-50%);
        }

        &:has([data-current-filter-count]:empty),
        &:not(:has([data-current-filter-count])) {
          .filter-clear {
            display: none;
          }
        }
      }

      .active-filters {
        margin-top: 0.25rem;
      }

      .active-filters:has(.active-filters__list:empty),
      .active-filters:not(:has(.active-filters__list)) {
        display: none;
      }
    }
  }
}