/*------------------------------------------------------------
FILTERS
====================================*/

// Selection
.filter-selected {
  display: inline-block;
  padding: $filter-selected-padding-y $filter-selected-padding-x;
  margin: 0 1rem 1rem 0;
  text-decoration: none;
  font-size: $filter-selected-font-size;
  font-weight: $filter-selected-font-weight;
  white-space: nowrap;
  color: $filter-selected-color;
  background: $filter-selected-bg;
  svg {
    width: $filter-selected-icon-width;
    height: $filter-selected-icon-height;
    margin-right: 0.5rem;
    vertical-align: sub;
    transition: 0.3s;
  }
  &:hover {
    color: $filter-selected-hover-color;
    background: $filter-selected-hover-bg;
    svg {
      fill: $filter-selected-hover-color;
    }
  }
}

// Block filtre
.filter-wrapper {
  .collapse-body {
    margin-bottom: 2.5rem;
  }
  .custom-checkbox {
    margin-bottom: 0;
    & + .custom-checkbox {
      margin-top: 2rem;
    }
  }
}

// Color
.filter-color-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.custom-checkbox-color {
  .custom-control-field {
    display: block;
    width: $filter-checkbox-color-width;
    height: $filter-checkbox-color-height;
    margin-bottom: $custom-control-gutter*2;
    border-color: $filter-checkbox-border-color;
  }

  input:checked ~ .custom-control-field {
    border-color: $custom-control-indicator-checked-border-color;
  }
}

// Price
.filter-price-wrapper {
  display: flex;
  padding-right: $collapse-header-width;
  justify-content: space-between;
  label {
    margin-right: $grid-gutter-width*0.5;
    margin-bottom: 0;
  }
  .input-group .input-group-append {
    min-width: 3rem;
    .input-group-text {
      padding: 0;
    }
  }
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-only(md) {
  // Price
  .filter-price-wrapper {
    padding-right: 0;
    label {
      margin-right: 1rem;
      &:last-child {
        margin-right: 0;
      }
    }
    input {
      padding: $input-padding-y 1rem;
    }
    .input-group .input-group-append {
      min-width: 2.5rem;
    }
  }
}
@include media-breakpoint-up(md) {
  // Block filtre
  .filter-wrapper {
    .collapse-body {
      max-height: 20rem;
    }
  }
}
