@import '_mixins.less';

//
//  Variables
//  _____________________________________________

@product-widget-title-side-line-color: rgba(107, 107, 107, 0.18);

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
  .products-grid .product-items.owl-carousel .product-item {
    &,
    .page-products & {
      max-width: none !important;
    }
  }

  .owl-dots--align-center {
    .owl-carousel {
      .owl-dots {
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }
  }

  .widget {
    &.block-products-list {
      .owl-carousel:not(.owl-loaded) {
        display: flex;
        > .product-item-info {
          opacity: 0;
          visibility: hidden;
        }
      }
      margin-bottom: 60px;
      .products-grid {
        .product-items:not(.owl-carousel) {
          display: flex;

          flex-flow: row wrap;
          .product-item {
            width: 100%;
          }
        }
      }
      .block-title {
        margin-bottom: 15px;

        strong,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          max-width: ~"calc(100% - 70px)";
          margin: 0;
          line-height: 1;
          display: inline-block;
          vertical-align: middle;
        }

        .owl-nav {
          margin-left: 20px;
          display: inline-block;
          vertical-align: middle;
        }

        &.no-title {
          .owl-nav {
            margin-left: 0;
          }
        }

        &.title-h1,
        &.title-h2,
        &.title-h3 {
          margin-bottom: 30px;
        }
      }

      &.title--align-center {
        .block-title {
          text-align: center;
        }
      }

      &.owl-nav--position-title {
        .owl-carousel {
          .owl-nav {
            display: none;
          }
        }
      }

      &.title--sideline {
        &.title--align-left {
          .block-title {
            display: flex;
            align-items: center;
            overflow: hidden;
            text-align: left;

            &:after {
              background-color: @product-widget-title-side-line-color;
              content: "";
              display: inline-block;
              height: 1px;
              position: relative;
              vertical-align: middle;
              width: 100%;
              left: 30px;
              margin-right: -100%;
            }

            &.no-title {
              &:after {
                left: 10px;
              }
            }
          }
        }

        &.title--align-center {
          .block-title {
            overflow: hidden;
            text-align: center;

            &:before,
            &:after {
              background-color: @product-widget-title-side-line-color;
              content: "";
              display: inline-block;
              height: 1px;
              position: relative;
              vertical-align: middle;
              width: 50%;
            }

            &:before {
              right: 30px;
              margin-left: -100%;
            }

            &:after {
              left: 30px;
              margin-right: -100%;
            }

            &.no-title {
              &:after {
                left: 10px;
              }

              &:before {
                right: 10px;
              }
            }
          }
        }
      }
    }
  }

  .owl-carousel.widget-product-grid {
    .owl-nav {
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.2s, visibility 0.2s;

      button {
        transition: transform 0.2s ease;

        &.owl-next,
        &.owl-prev {
          position: absolute;
          top: 50%;

          &.disabled {
            opacity: 0.2;
            cursor: default;
            pointer-events: none;
          }
        }

        &.owl-prev {
          transform: translateX(-20px) translateY(-50%);
          left: -10px;
        }

        &.owl-next {
          transform: translateX(20px) translateY(-50%);
          right: -10px;

          span {
            transform: rotate(180deg);
          }
        }
      }
    }
  }

  .owl-dots--show {
    .owl-carousel {
      .owl-nav {
        button {
          &.owl-next,
          &.owl-prev {
            margin-top: -25px;
          }
        }
      }
    }
  }

  .block.widget {
    .page-layout-1column-fullwidth &,
    .page-layout-3columns &,
    .page-layout-1column &,
    & {
      .mobile-products-grid();
    }
  }

  .product-grid__image-wrapper .action:is(.tocompare, .towishlist):after {
    content: none;
  }
  .widget.block-products-list .block-title {
    .title-wrap {
      max-width: ~"calc(100% - 70px)";
      margin: 0;
      line-height: 1;
      display: inline-block;
      vertical-align: middle;
      & > * {
        max-width: 100%;
      }
    }
  }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
  .widget.block-products-list {
    &.owl-nav--position-title {
      .block-title {
        .title-wrap,
        strong,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          max-width: ~"calc(100% - 60px)";
        }
        .title-wrap {
          & > * {
            max-width: 100%;
          }
        }

        .owl-nav {
          margin-left: 10px;
        }
      }
    }
  }
}

//
//  Tablet
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  .block.widget {
    .page-layout-1column-fullwidth &,
    .page-layout-3columns &,
    .page-layout-1column &,
    & {
      .tablet-products-grid();
    }
  }
}

//
//  Small Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = "min") and (@break = @screen__m) {
  .owl-carousel.widget-product-grid {
    &:hover {
      .owl-nav {
        visibility: visible;
        opacity: 1;
      }
    }
  }
  .block.widget {
    .page-layout-1column-fullwidth &,
    .page-layout-3columns &,
    .page-layout-1column &,
    & {
      .small-desktop-products-grid();
    }
  }
  .widget {
    &.block-products-list {
      .block-title {
        h1 {
          font-size: 58px;
        }
      }
    }
  }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
  .block.widget {
    .page-layout-1column-fullwidth &,
    .page-layout-3columns &,
    .page-layout-1column &,
    & {
      .desktop-products-grid();
    }
  }
}
