.x-refinements-bar {
  @include make-col-ready();
  @include make-col(12);
  padding-bottom: 0.5rem;
  // border-bottom: 1px solid $border-color;

  &-row { @include make-row(); }
  &-container {
    @include make-col-ready();
    display: flex;
  }

  &-container-left { @include make-col(8); }
  &-container-right { 
    @include make-col(4);
    justify-content: flex-end; 
  }

  .x-refinements-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    
    &-item {
      margin-right: 1rem;
      &:last-child {
        margin-right: 0;
      }

      a {
        color: theme-color("grey");
        cursor: pointer;

        &:hover {
          color: theme-color("primary-lighter");
        }
        
        .x-badge {
          padding: 0rem 0.25rem;
          margin-left: 0.25rem;
          margin-right: 0.25rem;
          border-radius: 0.25rem; 
          font-size: 0.75rem;
          background-color: #D2D5D9;
        }

        @include x-hover-focus-active() {
          text-decoration: none;
    
          &.active {
            color: theme-color("primary-lighter");

            .x-badge {
              background-color: #0060aa;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}