.search-filter {
  $component-name: ".search-filter";
  $search-filter-item-gap: -3;
  $search-filter-horizontal-padding: -4;

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  max-width: $line-width-max;
  min-height: line-height("multiple");

  &--unconstrained {
    max-width: none;
  }

  .form__inline-submit + &,
  .form__field + & {
    margin-top: spacing($forms-margin-field, $times: -1, $add: spacing(-4));
  }

  .toolbar + & {
    margin-top: spacing(-1);

    #{$component-name}__label--hint {
      margin-top: spacing(-1, $times: -1, $add: spacing(-3));
    }
  }

  &__items {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: spacing($search-filter-item-gap, $times: -1);
    padding: spacing($search-filter-item-gap, $times: .5);

    #{$component-name}__label {
      margin: spacing($search-filter-item-gap, $times: .5);
    }
  }

  &__label {
    @include set-font(0, "multiple");
    color: color("foreground-secondary");
    margin-bottom: spacing($search-filter-item-gap, $times: .5);
    margin-right: spacing($search-filter-item-gap);
    margin-left: 0;
    margin-top: 0;

    &--hint {
      @include set-font(-1, "single");
      align-self: flex-start;

      @include icon-style {
        @include set-icon("tip");
        margin-right: spacing(-5);
      }
    }
  }

  &__item {
    position: relative;
    flex: 0 0 auto;
    margin: spacing($search-filter-item-gap, $times: .5);
    @include set-font(0, "multiple");
    white-space: nowrap;
    @include set-colors("background-secondary");
    border-top-right-radius: calc(#{line-height("multiple", $include-calc: false)} / 2);
    border-bottom-right-radius: calc(#{line-height("multiple", $include-calc: false)} / 2);

    @include icon-style($position: "after") {
      @include set-icon("delete");
      width: line-height("multiple");
      border-radius: 50%;
      position: absolute;
      right: 0;
      top: 0;
      @include set-colors("interactive");
      box-shadow: $shadow-style-center color("shadow");
    }

    &__value {
      display: block;
      padding: 0 spacing($search-filter-horizontal-padding, $add: line-height("multiple", $include-calc: false)) 0 spacing($search-filter-horizontal-padding);
      $max-width: "min(calc(100vw - var(--vertical-scrollbar-width, 0px) - #{spacing("side")} * 2), #{$line-width-max})";
      max-width: #{$max-width};
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:hover {
      background-color: color("background-secondary-hover");
      outline: none;

      &::after {
        background-color: color("interactive-hover");
      }
    }

    &:active {
      outline: none;

      &::after {
        box-shadow: $shadow-style-back color("shadow");
      }
    }

    &:focus-visible {
      outline: $outline-width solid color("utility-focus");
      outline-offset: $outline-offset;
    }   

    &--clear-all {
      @include set-colors("interactive");
      border-radius: 0;
      padding: 0 spacing(-4);
      box-shadow: $shadow-style-center color("shadow");

      &::after {
        content: none;
      }

      &:hover {
        background-color: color("interactive-hover");
      }

      &:active {
        box-shadow: $shadow-style-back color("shadow");
      }
      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }   
    }
  }
}