/*------------------------------------------------------------
LISTING
====================================*/

/* Variables Custom */
$image-bg-pattern-color: $secondary;
$image-bg-pattern: str-replace(url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 60 60' style='enable-background:new 0 0 60 60;' xml:space='preserve'%3E%3Cpath fill='#{$image-bg-pattern-color}' d='M5,43.6l2.8-2.8l1.4,1.4L6.4,45H5V43.6z M5,6.4l2.8,2.8l1.4-1.4L6.4,5H5V6.4L5,6.4z M43.6,45l-2.8-2.8l1.4-1.4l2.8,2.8V45H43.6z M45,6.4l-2.8,2.8l-1.4-1.4L43.6,5H45V6.4z M25,23.6l2.8-2.8l1.4,1.4L26.4,25l2.8,2.8 l-1.4,1.4L25,26.4l-2.8,2.8l-1.4-1.4l2.8-2.8l-2.8-2.8l1.4-1.4L25,23.6L25,23.6z'/%3E%3C/svg%3E%0A"), "#", "%23");
/***************************************/

.listing-container {
  margin-bottom: 30px;
  .h1 {
    margin-bottom: 20px;
  }
  .pagination-wrapper {
    margin-top: 20px;
  }
}

// Header
.listing-header-img-wrapper {
  position: relative;
  margin-bottom: 45px;
  text-align: right;
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    width: calc(100% - 15px);
    height: 100%;
    background: {
      image: $image-bg-pattern;
      size: 60px
    }
  }
}
.listing-header-img {
  position: relative;
}

.listing-search-wrapper {
  .listing-show {
    display: none;
  }
}
.listing-search-container {
  padding: 15px 0;
  margin-bottom: 30px;
  border-top: 1px solid $gray-200;
  border-bottom: 1px solid $gray-200;
  .listing-search-title {
    display: none;
    font-size: 16px;
  }
}


/* RESPONSIVE */
/***************************************/
@include media-breakpoint-down(sm) {
  // Header
  .listing-header-container {
    text-align: center;
  }
  .listing-header-img {
    width: calc(100% - 15px);
  }
}
@include media-breakpoint-up(md) {
  .listing-container {
    margin-bottom: 70px;
    .show-hide-footer-link {
      text-align: left;
    }
  }

  // Header
  .listing-header-container {
    align-items: center;
    margin-bottom: 30px;
  }
  .listing-header-img-wrapper {
    margin-bottom: 30px;
    &:before {
      top: 30px;
      right: 30px;
      width: calc(100% - 30px);
    }
  }

  .listing-search-wrapper {
    display: flex;
    align-items: center;
    padding: 15px 0px;
    .listing-show {
      display: flex;
    }
  }
  .listing-search-container {
    padding: 0;
    .listing-search-title {
      display: block;
      margin: 0;
    }
    .col-md-3 {
      display: flex;
      align-items: center;
      border-right: 1px solid $gray-200;
    }
  }
}
