/**
 * Custom grid fo product miniatures
 * Used bootstrap grid classes
 */
main {
  .products {
    @extend .row;
    margin-left: -5px;
    margin-right: -5px;
    article.product-miniature {
      @extend .col-6, .col-sm-4, .col-md-6, .col-lg-4, .col-xl-4, .px-1, .px-md-2;
    }
    @include media-breakpoint-up(md) {
      margin-left: -15px;
      margin-right: -15px;
    }
  }
  .grid .products article.product-miniature {
    @extend .col-12, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-4, .px-1, .px-md-2;
  }
  .list .products article.product-miniature {
    @extend .col-12;
  }
  .layout-both-columns & {
    .grid .products article.product-miniature {
      @extend .col-6, .col-sm-4, .col-md-6, .col-xl-6, .col-xxl-6, .px-1, .px-md-2;
    }
    .list .products article.product-miniature {
      @extend .col-12;
    }
  }
  .layout-full-width & {
    .grid .products article.product-miniature {
      @extend .col-12, .col-sm-6, .col-md-4, .col-lg-4, .col-xl-3, .px-1, .px-md-2;
    }
    .list .products article.product-miniature {
      @extend .col-12;
    }
  }
}

/**
 * Product miniatures custom styles
 * Used in default miniatures
 */
.product-miniature {
  margin-bottom: $spacer;
  &-container {
    height: 100%;
  }
  &-thumbnail {
    position: relative;
  }
  &-information {
    padding-top: $spacer * 0.5;
    .js-compare-button, .jx-wishlist-button {
      color: $black;
      display: inline-block;
      i {
        font-size: 24px;
        line-height: 1;
      }
      span {
        display: none;
      }
      @include hover-focus-active {
        color: $brand-primary;
      }
    }
    .js-compare-button + .jx-wishlist-button, .jx-wishlist-button + .js-compare-button {
      margin-left: 35px;
    }
    .product-buttons {
      .add-to-cart, .view-product, .customize {
        @extend .btn, .btn-default, .btn-lg;
      }
    }
  }
  .grid & {
    .product-buttons .quick-view {
      display: none;
      @extend .btn, .btn-default, .btn-lg;
      i {
        display: none;
      }
    }
    &-thumbnail {
      .daydeal-box {
        position: absolute;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
      }
    }
    &-information {
      position: relative;
      text-align: center;
      padding-bottom: 30px;
      .product-description-short, .variant-links, .product-price .daydeal-box {
        display: none;
      }
      .product-price {
        justify-content: center;
      }
      .product-buttons {
        margin-top: 20px;
      }
      .buttons-wrapper {
        margin-bottom: 20px;
        .btn {
          i {
            display: none;
          }
        }
      }
    }
    .list-enable {
      display: none;
    }
    @include media-breakpoint-up(md) {
      .product-buttons .quick-view {
        display: block;
      }
      .product-miniature-information {
        .buttons-wrapper {
          display: flex;
          align-items: center;
          > a {
            width: 50%;
            padding-left: 10px;
            padding-right: 10px;
            + a {
              margin-left: -1px;
            }
          }
        }
      }
    }
    @include media-breakpoint-up(xl) {
      .product-miniature-container {
        .product-miniature-thumbnail {
          .daydeal-box {
            top: 55%;
            transform: translateY(-50%);
            bottom: auto;
            opacity: 0;
            pointer-events: none;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            will-change: transform;
          }
        }
        .product-buttons {
          position: absolute;
          left: 0;
          right: 0;
          top: 3px;
          transition: all 0.3s ease-in-out;
          opacity: 0;
          pointer-events: none;
          overflow: hidden;
          margin-top: 0;
        }
        .product-miniature-information {
          padding-bottom: 50px;
          .buttons-wrapper {
            margin-bottom: 30px;
          }
        }
        &:hover, &:active, &:focus, &.hover {
          .product-miniature-thumbnail {
            .daydeal-box {
              top: 58%;
            }
          }
          .product-miniature-thumbnail .daydeal-box, .product-buttons {
            opacity: 1;
            pointer-events: auto;
            overflow: visible;
          }
        }
      }
    }
  }
  .list & {
    margin-bottom: 60px;
    &-container {
      display: flex;
    }
    &-thumbnail {
      flex: 0 0 35%;
      max-width: 320px;
      margin-right: 15px;
      .quick-view {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
      }
      .daydeal-box {
        display: none;
      }
    }
    &-information {
      padding-top: 0;
      .grid-enable, .variant-links, .product-buttons .quick-view {
        display: none;
      }
      .daydeal-wrapper {
        display: inline-block;
      }
      .product-title {
        font: 500 18px/20px $font-family-base;
      }
      .product-description-short {
        font: 300 13px/22px $font-family-base;
        color: $gray-61;
        margin-top: 18px;
        display: none;
      }
      .product-price {
        .price {
          font-size: 24px;
          line-height: 1.111;
        }
      }
      .js-compare-button + .jx-wishlist-button,
      .jx-wishlist-button + .js-compare-button {
        margin-left: 15px;
      }
      .product-buttons {
        display: flex;
        align-items: center;
        .quick-view {
          color: $black;
          i {
            font-size: 24px;
            line-height: 1;
          }
          span {
            display: none;
          }
          @include hover-focus-active {
            color: $brand-primary;
          }
        }
        .buttons-wrapper {
          margin-right: 15px;
          .btn {
            margin-right: 15px;
          }
          .add-to-cart, .view-product, .customize {
            padding: 0;
            width: 60px;
            height: 60px;
            i {
              font-size: 24px;
              line-height: 60px;
              margin-left: 3px;
            }
            span {
              display: none;
            }
          }
        }
      }
      .product-buttons, .daydeal-box {
        margin-top: 20px;
      }
    }
    @include media-breakpoint-between(md, lg) {
      .product-miniature-information {
        .quick-view {
          display: inline-block;
        }
      }
    }
    @include media-breakpoint-up(md) {
      .product-miniature-thumbnail{
        max-width: 430px;
        margin-right: 30px;
      }
      .product-miniature-information {
        .product-description-short {
          display: block;
        }
        .daydeal-box {
          padding-left: 40px;
          padding-right: 40px;
        }
        .buttons-wrapper {
          margin-right: 20px;
          .btn {
            margin-right: 20px;
          }
        }
        .product-buttons, .daydeal-box {
          margin-top: 30px;
        }
        .js-compare-button + .jx-wishlist-button,
        .jx-wishlist-button + .js-compare-button {
          margin-left: 20px;
        }
      }
    }
    @include media-breakpoint-up(xl) {
      .product-miniature-thumbnail {
        .quick-view {
          display: block;
          opacity: 0;
          pointer-events: none;
          overflow: hidden;
        }
      }
      .product-miniature-information {
        .daydeal-box {
          padding-left: 80px;
          padding-right: 80px;
        }
        .js-compare-button + .jx-wishlist-button,
        .jx-wishlist-button + .js-compare-button {
          margin-left: 35px;
        }
        .product-buttons, .daydeal-box {
          margin-top: 50px;
        }
        .buttons-wrapper {
          margin-right: 38px;
          .btn {
            margin-right: 0;
          }
          .add-to-cart, .view-product, .customize {
            width: auto;
            height: auto;
            padding: 22px 50px;
            i {
              display: none;
            }
            span {
              display: inline-block;
            }
          }
        }
      }
      .product-miniature-container {
        &:hover, &:active, &:focus, &.hover {
          .product-miniature-thumbnail {
            .quick-view {
              opacity: 1;
              pointer-events: auto;
              overflow: visible;
            }
          }
        }
      }
    }
  }
}

#product {
  @include media-breakpoint-up(md) {
    .grid .product-miniature .product-miniature-information .buttons-wrapper > a {
      width: 100%;
    }
  }
}

/**
 * Product miniatures custom styles
 * Used in small miniatures
 */
.product-miniature-small {
  &:not(:last-child) {
    margin-bottom: 30px;
  }
  .product-miniature-container {
    display: flex;
    .product-miniature-thumbnail {
      flex: 0 0 30%;
      max-width: 89px;
      margin-right: 20px;
    }
    .product-title {
      margin-bottom: 4px;
    }
    .regular-price, .discount-product {
      display: none;
    }
  }
}

/**
 * Product miniatures custom styles
 */
.product-miniature-custom {
  height: 100%;
  margin-bottom: 0;
  .product-miniature-container {
    background: $gray-100;
    border: solid 22px $white;
  }
  .product-flags {
    display: none;
  }
  .product-miniature-information {
    padding: 25px 10px 50px;
    text-align: center;
    .product-title {
      font: 500 24px/30px $font-family-base;
      margin-bottom: 0;
    }
    .product-description-short {
      font: 300 13px/18px $font-family-base;
    }
    .variant-links {
      display: none;
    }
    .product-buttons {
      margin-top: 20px;
    }
    .add-to-cart, .view-product, .customize {
      padding-left: 20px;
      padding-right: 20px;
      .price {
        transition: all 0.3s ease-in-out;
      }
      @include hover-focus-active {
        .price {
          color: $white;
        }
      }
    }
  }
  @include media-breakpoint-between(sm, lg) {
    .product-miniature-information {
      .product-title {
        font-size: 18px;
        line-height: 1.25;
      }
    }
  }
  @include media-breakpoint-up(sm) {
    .product-miniature-container {
      border-width: 18px;
    }
  }
  @include media-breakpoint-up(xl) {
    .product-miniature-information {
      .product-buttons {
        margin-top: 35px;
      }
    }
  }
  @include media-breakpoint-up(xxl) {
    .product-miniature-container {
      border-width: 22px;
    }
    .product-miniature-information {
      padding-bottom: 70px;
      .product-description-short {
        padding-left: 80px;
        padding-right: 80px;
      }
      .add-to-cart, .view-product, .customize {
        min-width: 420px;
      }
    }
  }
}