.c-active-filters {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: wrap;

  @include mq(desktop) {
    flex-direction: row;
    align-items: center;
  }

  li {
    list-style: none;
    display: flex;
    margin-bottom: $spacing--small/2;

    @include mq(desktop) {
      margin: 0 $spacing--small 0 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  button {
    height: 38px;
    border: 0;
    background: $brand-color--light;
    color: $brand-color--dark;
    border-radius: $border-radius;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 $spacing--small;
    width: 100%;
    justify-content: space-between;
    @include font-size(16px, 36px);
    font-weight: $font-weight-semibold;

    @include mq(desktop) {
      width: auto;
      justify-content: flex-start;
      @include font-size(18px, 40px);
      height: 40px;
    }

    span {
      white-space: nowrap;
      padding-right: $spacing--small;
    }
  }
}