.constraints-container {
  @extend .mb-2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.25rem;
}

.applied-filter {
  @extend .mx-1;

  .constraint-value {
    cursor: default;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    @media (max-width: breakpoint-min(sm)) {
      max-width: breakpoint-min(sm) * .5;
    }

    @media (min-width: breakpoint-min(sm)) and (max-width: breakpoint-max(sm)) {
      max-width: breakpoint-min(sm) * .5;
    }

    @media (min-width: breakpoint-min(md)) and (max-width: breakpoint-max(md)) {
      max-width: breakpoint-min(md) * .5;
    }

    @media (min-width: breakpoint-min(lg)) {
      max-width: breakpoint-min(lg) * .5;
    }

    &:hover, &:active {
      background-color: theme-color("secondary");
      border-color: theme-color("secondary");
      box-shadow: none;
    }
  }

  .filter-name:after {
    color: $gray-500;
    content: "❯";
    font-size: 90%;
    padding-left: $caret-width;
  }

  .remove:hover, .remove:active {
    @extend .btn-danger;
  }
}