@import './variables';

$spacing: tight;

.Polaris-FilterControl__Controls {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.Polaris-FilterControl__Search {
  flex-grow: 1;
}

.Polaris-FilterControl__AppliedFilters {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  margin-top: -1 * filter-control(header-padding-small);
  margin-left: -1 * filter-control(header-padding-small);
  margin-right: -1 * filter-control(header-padding-small);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  &::after {
    content: '';
    flex: 0 0 filter-control(header-padding-small);
  }

  @include breakpoint-after(filter-control(breakpoint-small)) {
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: -1 * spacing($spacing);
    margin-top: -1 * spacing(base);

    &::after {
      content: none;
      flex: none;
    }
  }

  @include breakpoint-before(filter-control(breakpoint-small)) {
    // account for scrollbar
    padding-bottom: spacing($spacing);
  }
}

.Polaris-FilterControl__AppliedFilter {
  flex: 1 0 auto;
  margin-top: spacing($spacing);
  margin-left: filter-control(header-padding-small);
  max-width: calc(100% - #{spacing($spacing)});

  @include breakpoint-after(filter-control(breakpoint-small)) {
    flex: 0 1 auto;
    margin-left: spacing($spacing);
  }
}