#filter-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  //width: 100%;
  height: auto;
  gap: -1px;
  //outline: solid 1px white;
  //outline-offset: -1px;
  //margin: var(--gutter-lg) 0;
  z-index: 99;
  justify-content: space-between;
  margin-bottom : var(--element-gutter);
  }
//#filter-controls:after {
//  content: '';
//  box-sizing: border-box;
//  }

#filter-controls.overlay {
  display: none;
  transition: opacity 5s;
  }

filter-button {
  flex: 20%;
  white-space: nowrap;
  border-radius: var(--border-radius-xs);
  }

/* Need to add a mutation observer in the shadow dom to observe this change using shadow styles!!!! */

.mixitup-control-active {
  //color: #fff !important;
  outline: 1px solid #000;
  outline-offset: -1px;
  background-color: #000;
  filter: invert(100%);
  //--font-color: #000;
  transform: translateZ(-10px);
  }

category-label {
  display: inline-block;
  }

@media screen and (min-width: 1440px) {

  #filter-controls {
    flex-wrap: nowrap;
    }

  filter-button {
    flex : 1 1 auto;
    }
  }
@media screen and (max-width: 991px) {
  filter-button {
    //flex : 1 1 25%;
    flex : 1 1 auto;
    max-width: 40vw;
    }
  .filterspacer {
    display    : flex;
    flex-basis : 100%;
    max-height : 0px;
    }
  }
@media screen and (max-width: 479px) {
  #filter-controls {
    display: none;
    }

  }