@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/abstracts' as *;

.filters__applied,
.filters__tags {
  display: flex;
  gap: 15px;
  align-items: baseline;
  flex-wrap: wrap;
}

.filters__applied {
  padding: 30px 15px;
  border-bottom: 1px solid var(--gray-40);

  &-label {
    font-weight: 600;
  }
}

.search__results {
  .content__sidebar {
    padding: (math.div(45px, $base-font-size-px) + em)
      (math.div(15px, $base-font-size-px) + em) 0;

    border: 1px solid var(--gray-40);
    background-color: var(--gray-5);

    .o-expandable-group {
      margin-bottom: 15px;

      // TODO: The below customizations should be usurped by an expandable facet.
      // See https://github.com/cfpb/design-system/pull/1628

      // Override for top border in expandable group.
      .o-expandable:first-child {
        border-top: 0;
      }

      // Override for left/right padding on the label and content.
      .o-expandable__content,
      .o-expandable__header {
        padding-left: 0;
        padding-right: 0;
      }
    }

    .o-form__group {
      margin-bottom: 0;
    }
  }
  .content__sidebar.no-results {
    padding: math.div(30px, $base-font-size-px) + em;
  }
  .content__main {
    border: 0;
    border-top: 1px solid var(--gray-40);
    padding-top: 0;

    &::after {
      border: 0;
    }
  }
  .results__count {
    padding: (math.div(15px, $base-font-size-px) + em)
      (math.div(15px, $base-font-size-px) + em) 0;
    border-right: 1px solid var(--gray-40);
    border-bottom: 1px solid var(--gray-40);
    background-color: var(--green-20);

    &.no-results {
      background-color: var(--red-20);
      padding-bottom: 15px;
    }
  }
  .results__list {
    padding: (math.div(30px, $base-font-size-px) + em)
      (math.div(15px, $base-font-size-px) + em);

    li {
      list-style-type: none;
    }
  }
  .results__item {
    margin: math.div(15px, $base-font-size-px) + em;
    & + .results__item {
      margin-top: math.div(30px, $base-font-size-px) + em;
      h4 {
        padding-top: math.div(30px, $base-font-size-px) + em;
        border-top: 1px solid var(--gray-40);
      }
    }
  }
  .results__paginator {
    margin: 0 math.div(15px, $base-font-size-px) + em;
    padding: 0 math.div(15px, $base-font-size-px) + em;
    max-width: 41.875rem;
  }
}

// Tablet and below.
@include respond-to-max($bp-sm-max) {
  .search__results {
    .content__sidebar {
      padding-top: math.div(15px, $base-font-size-px) + em;
    }
    .content__sidebar.no-results {
      padding: math.div(15px, $base-font-size-px) + em;
    }
    .content__main {
      margin-top: math.div(15px, $base-font-size-px) + em;
    }
    .results__count {
      border-left: 1px solid var(--gray-40);
    }
  }
}
