@import "../variables";
@import "bootstrap/mixins/vendor-prefixes";

/**
 * Filter pattern.
 */

.cr-filter-input {
  label {
    @extend .sr-only;
  }

  .cr-filter-input__input {
    @extend .form-control;

    &::-ms-clear {
      display: none;
    }
  }

  .cr-filter-input__button .btn {
    border: 0;
    background: transparent;

    &:focus {
      outline: none;
    }

    &:active {
      box-shadow: none;
    }
  }

  .cr-input-group__icon {
    @extend .cr-i, .cr-i--remove;

    position: relative;
    top: 4px;
    color: $brand-gray-medium;
    @include transition(color 100ms linear);
  }
}

.cr-index {
  @extend .list-unstyled;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  margin: 0;
  padding: 0;

  &__category {
    display: inline-block;
    width: 100%;
  }

  &__category-label {
    margin: 0;
    border-top: 0;
    padding-top: 1em;
  }

  &__list {
    @extend .list-unstyled;
    display: inline-block;
  }

  &__list-item {
    margin-bottom: 3px;
    font-weight: bold;
  }
}

@media screen and (max-width: $screen-sm-min) {
  .cr-index {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}