.sw-search-filters {
  --header-button-width: var(--rhythm-4);
  --header-gap: var(--rhythm-1);

  max-height: var(--rhythm-40);
  overflow-y: auto;
  .header {
    align-items: center;
    background-color: var(--filter-header-background-color);
    border-bottom: 1px solid var(--color-neutral-light);
    display: flex;
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-semi-bold);
    gap: var(--header-gap);
    height: var(--rhythm-5);
    justify-content: space-between;
    padding: 0 var(--rhythm-0_5) 0 var(--rhythm-1_5);

    &.expanded {
      background-color: var(--filter-header-background-active-color);
      border: 0;
      .header-button {
        transform: rotate(180deg);
      }
    }
    .header-content {
      box-sizing: border-box;
      cursor: pointer;
      height: var(--rhythm-5);
      overflow: hidden;
      padding: calc(var(--rhythm-1) + var(--rhythm-0_25)) 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - var(--header-button-width) - var(--header-gap));
      &.not-expandable {
        cursor: default;
      }
    }
  }

  .expander-content {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    gap: var(--rhythm-1);
    padding: var(--rhythm-1_5);
    &.indented {
      padding: var(--rhythm-1) var(--rhythm-2) var(--rhythm-1) calc(var(--rhythm-5) - var(--rhythm-0_5));
    }
  }

  input[type='date'] {
    background: none;
    border: 1px solid var(--color-neutral-light);
    box-sizing: border-box;
    color: inherit;
    font-family: inherit;
    padding: var(--rhythm-1);
    width: 100%;
  }
}
