/*
 * isotope-layout.scss
 * -----------------------------------------------
*/
//variables
$isotope-layout-filter-bg-color: #343434;

/* -------- Isotop Filter ---------- */
.isotope-layout-filter,
.carousel-layout-filter {
  margin-bottom: 30px;
  a {
    @include transition(all 0.3s ease-in-out 0s);

    color: #777;
    font-size: 15px;
    font-weight: 500;
    margin: 0 5px 10px;
    padding: 8px 20px 6px;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    border: 2px solid;
    border-color: transparent;

    &.active,
    &:focus,
    &:hover {
      color: #fff;
      background: $isotope-layout-filter-bg-color;
    }

    @include media-breakpoint-down(sm) {
    }
  }

  &.filter-style-2 {
    a {
      border-color: $isotope-layout-filter-bg-color;

      &.active,
      &:focus,
      &:hover {
      }
    }
  }

  &.filter-style-3 {
    a {
      border-color: #eee;

      &.active,
      &:focus,
      &:hover {
      }
    }
  }

  &.filter-style-4 {
    a {
      background-color: #f7f7f7;

      &.active,
      &:focus,
      &:hover {
        background: $isotope-layout-filter-bg-color;
      }
    }
  }

  &.filter-style-5 {
    a {
      border-radius: 7px;

      &.active,
      &:focus,
      &:hover {
      }
    }
  }

  &.filter-style-6 {
    a {
      border-radius: 7px;
      border-color: $isotope-layout-filter-bg-color;

      &.active,
      &:focus,
      &:hover {
      }
    }
  }
}

/* -------- Isotop Gallery ---------- */
.isotope-layout {
  /* by default 4 grids */
  .isotope-layout-inner {
    position: relative;
  }
  .isotope-item {
    padding: 0 15px;
    margin: 0 0 30px;
    float: left;
    width: 24.98%;
    .isotope-item-inner {
      position: relative;
      height: 100%;
    }
    &.tm-masonry-large-wide,
    &.tm-masonry-large-width-height {
      width: 49.98%;
    }

    /* item sizer */
    &.isotope-item-sizer {
      padding: 0 !important;
      margin-bottom: 0 !important;
      width: 24.98%;
      &.tm-masonry-large-wide,
      &.tm-masonry-large-width-height {
        width: 49.98%;
      }
    }
    .thumb {
      img {
        width: 100%;
      }
    }
  }
  &.isotope-layout-single-item:not(.shop-archive):not(.blog-archive) {
    margin-left: 0;
    .isotope-layout-inner {
      margin-left: 0;
      margin-right: 0;
    }
    .isotope-item {
      padding-right: 0;
      padding-left: 0;
      margin-bottom: 0;
      width: 100% !important;
      position: relative !important;
      .hentry {
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }
  }

  /*portfolio 2 grids*/
  &.grid-1 .isotope-item {
    width: 100% !important;
    &.tm-masonry-large-wide,
    &.tm-masonry-large-width-height {
      width: 100% !important;
    }
  }

  /*portfolio 2 grids*/
  &.grid-2 .isotope-item {
    width: 49.98%;
    &.tm-masonry-large-wide,
    &.tm-masonry-large-width-height {
      width: 100%;
    }
  }

  /*portfolio 3 grids*/
  &.grid-3 .isotope-item {
    width: 33.2%;
    &.tm-masonry-large-wide,
    &.tm-masonry-large-width-height {
      width: 66.4%;
    }
  }

  /*portfolio 4 grids*/
  &.grid-4 {
    width: 100.1%;
    width: calc(100% + 1px);
    .isotope-item {
      width: 24.98%;
      &.tm-masonry-large-wide,
      &.tm-masonry-large-width-height {
        width: 49.98%;
      }
    }
  }

  /*portfolio 5 grids*/
  &.grid-5 .isotope-item {
    width: 20%;
    &.tm-masonry-large-wide,
    &.tm-masonry-large-width-height {
      width: 40%;
    }
  }

  /*portfolio 6 grids*/
  &.grid-6 .isotope-item {
    width: 16.5%;
    &.tm-masonry-large-wide,
    &.tm-masonry-large-width-height {
      width: 33%;
    }
  }

  /*gutter*/
  .isotope-layout-inner {
    margin: 0 -15px;
  }
  .isotope-item {
    padding: 0 15px;
    margin: 0 0 30px;
  }

  &.gutter {
    .isotope-layout-inner {
      margin: 0 -15px;
    }
    .isotope-item {
      padding: 0 15px;
      margin: 0 0 30px;
    }
  }
  &.gutter-0 {
    .isotope-layout-inner {
      margin: 0;
    }
    .isotope-item {
      padding: 0;
      margin: 0;
    }
  }
  &.gutter-5 {
    .isotope-layout-inner {
      margin: 0 -5px;
    }
    .isotope-item {
      padding: 0 5px;
      margin: 0 0 10px;
    }
  }
  &.gutter-10 {
    .isotope-layout-inner {
      margin: 0 -10px;
    }
    .isotope-item {
      padding: 0 10px;
      margin: 0 0 20px;
    }
  }
  &.gutter-15 {
    .isotope-layout-inner {
      margin: 0 -15px;
    }
    .isotope-item {
      padding: 0 15px;
      margin: 0 0 30px;
    }
  }
  &.gutter-20 {
    .isotope-layout-inner {
      margin: 0 -20px;
    }
    .isotope-item {
      padding: 0 20px;
      margin: 0 0 40px;
    }
  }
  &.gutter-30 {
    .isotope-layout-inner {
      margin: 0 -30px;
    }
    .isotope-item {
      padding: 0 30px;
      margin: 0 0 60px;
    }
  }
  &.gutter-40 {
    .isotope-layout-inner {
      margin: 0 -40px;
    }
    .isotope-item {
      padding: 0 40px;
      margin: 0 0 80px;
    }
  }
  &.gutter-50 {
    .isotope-layout-inner {
      margin: 0 -50px;
    }
    .isotope-item {
      padding: 0 50px;
      margin: 0 0 100px;
    }
  }
  &.gutter-60 {
    .isotope-layout-inner {
      margin: 0 -60px;
    }
    .isotope-item {
      padding: 0 60px;
      margin: 0 0 120px;
    }
  }
}

/* -------- Isotop Item Media Query ---------- */
.isotope-layout {
  .isotope-item {
    @media (max-width: $ele-breakpoint-mobile-max) {
      width: 33.2% !important;
      &.tm-masonry-large-wide,
      &.tm-masonry-large-width-height {
        width: 100% !important;
      }
    }

    @media (max-width: $ele-breakpoint-tablet-max) {
      width: 49.98% !important;
      &.tm-masonry-large-wide,
      &.tm-masonry-large-width-height {
        width: 100% !important;
      }
    }

    @include media-breakpoint-down(lg) {
      width: 49.98% !important;
      &.tm-masonry-large-wide,
      &.tm-masonry-large-width-height {
        width: 100% !important;
      }
    }
    @include media-breakpoint-down(md) {
      width: 100% !important;
      &.tm-masonry-large-wide,
      &.tm-masonry-large-width-height {
        width: 100% !important;
      }
    }
    @include media-breakpoint-down(sm) {
      width: 100% !important;
      &.tm-masonry-large-wide,
      &.tm-masonry-large-width-height {
        width: 100% !important;
      }
    }
  }
}

.isotope-layout:not(.isotope-rendered) {
  .isotope-item {
    float: left;
  }
  &.grid-2 {
    > .isotope-item {
      width: 50%;
    }
  }
  &.grid-3 {
    > .isotope-item {
      width: 33%;
    }
  }
  &.grid-4 {
    > .isotope-item {
      width: 25%;
    }
  }
  &.grid-5 {
    > .isotope-item {
      width: 19%;
    }
  }
  &.grid-6 {
    > .isotope-item {
      width: 16%;
    }
  }
}