@import "variables";
@import "mixins";

body {
  &.all-pages-loaded {
    .pagination {
      display: none;
    }
    section.list {
      margin-bottom: $space-lg;
    }
  }
  &.loading {
    [post-container] {
      opacity: 0.5;
      transition: 1s;
    }
  }
  &:not(.no-posts) {
    .no-posts-response {
      display: none;
    }
  }
}

section.header {
  .row-head {
    text-align: center;
    margin-top: $space-md;
    margin-bottom: $space-md;
    @include bp("md") {
      text-align: left;
      margin-bottom: $space-xxs;
    }
    h1 {
      color: $col-sec;
    }
  }
}

section.filter {
  margin-bottom: $space-lg;
  @include bp("md") {
    margin-bottom: $space-sm;
  }
  select {
    cursor: pointer;
    min-width: 20%;
    margin-right: 3rem;
    box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.1), 0px 3px 6px 0px rgba(16, 76, 61, 0.1), 0px 10px 10px 0px rgba(16, 76, 61, 0.09), 0px 23px 14px 0px rgba(16, 76, 61, 0.05),
      0px 41px 16px 0px rgba(16, 76, 61, 0.01), 0px 64px 18px 0px rgba(16, 76, 61, 0);
    @include bp("md") {
      min-width: 100% !important;
      margin: $space-xxs 0 0 !important;
      color: $black !important;
    }
    &:last-of-type {
      @include bp("md") {
        margin-right: 0;
        margin-left: 15px;
      }
    }
  }
  .search_bar {
    display: inline-block;
    position: relative;
    float: right;
    @include bp("md") {
      float: none;
      width: 100%;
      margin: $space-xxs 0;
    }
    input[type="search"] {
      padding: 1rem 4rem 1rem 24px;
      box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.1), 0px 3px 6px 0px rgba(16, 76, 61, 0.1), 0px 10px 10px 0px rgba(16, 76, 61, 0.09), 0px 23px 14px 0px rgba(16, 76, 61, 0.05),
        0px 41px 16px 0px rgba(16, 76, 61, 0.01), 0px 64px 18px 0px rgba(16, 76, 61, 0);
      @include bp("md") {
        width: 100%;
      }
    }
    .search-icon {
      pointer-events: none;
      position: absolute;
      content: url(theme-url("/assets/icons/search.svg"));
      opacity: 0.3;
      top: 7px;
      right: 20px;
      @include bp("md") {
        right: 15px;
      }
    }
    input[type="search"] {
      &:active,
      &:focus {
        + .search-icon {
          opacity: 1;
        }
      }
    }
  }
}

section.list {
  @import "card.scss";
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 56px;
    @include bp("lg") {
      grid-template-columns: repeat(2, 1fr);
    }
    @include bp("sm") {
      grid-template-columns: repeat(1, 1fr);
      grid-row-gap: $space-xs;
    }
  }
  .no-posts-response {
    .container {
      grid-template-columns: repeat(1, 1fr);
    }
    h3 {
      color: $col-sec;
      margin-bottom: $space-lg;
    }
  }
}

section.pagination {
  @import "pagination.scss";
}
