/* #Shortcode carousel
================================================== */

.custom-mixin-text-color (@customColor) when (iscolor(@customColor)) {
  color: @customColor;
}

.custom-mixin-text-color-star (@customColor, @color-opacity:100%) when (iscolor(@customColor)) {
  color: fade(@customColor, @color-opacity);
}

.custom-mixin-pagination-gap (@customSize) when (isnumber(@customSize)) {
  margin-top: @customSize;
}

.custom-mixin-fade-bg (@customColor, @opacity:100%) when (iscolor(@customColor)) {
  background: fade(@customColor, @opacity);
}

.custom-mixin-filter-color (@customColor, @opacity) when (iscolor(@customColor)) {
  color: fade(@customColor, @opacity);

  background: none;
}

.custom-mixin-filter-gap (@customSize) when (isnumber(@customSize)) {
  margin-bottom: @customSize;
}

.custom-mixin-fade-border (@customColor, @opacity:100%) when (iscolor(@customColor)) {
  border-color: fade(@customColor, @opacity);
}

.woocommerce-product-details__short-description {
  .@{unique-shortcode-class-name} & {
    .custom-mixin-text-color (@post-content-color);
  }
}

.star-rating,
.star-rating:before {
  .@{unique-shortcode-class-name} & {
    .custom-mixin-text-color-star (@post-title-color, 20%);
  }
}

.entry-title,
.entry-title *,
.woocom-list-content .price,
.woocom-list-content .price * {
  .@{unique-shortcode-class-name} & {
    .custom-mixin-text-color (@post-title-color);
  }
}

.woocom-list-content .price del,
.woocom-list-content .price del * {
  .@{unique-shortcode-class-name} & {
    .custom-mixin-text-color (@price-color);
  }
}

.filter {
  .@{unique-shortcode-class-name} & {
    .custom-mixin-filter-gap (@shortcode-filter-gap);

    & a,
    & a * {
      .custom-mixin-text-color (@post-title-color);
      color: @shortcode-filter-color;
    }
  }
}

.filter-categories a {
  .@{unique-shortcode-class-name} .filter:not(.filter-bg-decoration):not(.filter-underline-decoration) & {
    &:hover,
    &.act {
      .custom-mixin-filter-color (@shortcode-filter-accent, 100%);
    }

  }

  .@{unique-shortcode-class-name} .filter-bg-decoration & {
    &:not(.act):hover {
      .custom-mixin-filter-color (@shortcode-filter-accent, 100%);
    }

    &.act {
      color: #fff;
    }

    &.act:after {
      .custom-mixin-fade-bg (@shortcode-filter-accent);
    }
  }

  .@{unique-shortcode-class-name} .filter-underline-decoration & {
    &:after {
      .custom-mixin-fade-bg (@shortcode-filter-accent);
    }
  }
}

.paginator {
  .@{unique-shortcode-class-name} & {
    .custom-mixin-pagination-gap (@shortcode-pagination-gap);
  }
}

.paginator {
  .@{unique-shortcode-class-name} & {
    & a,
    & a * {
      color: @shortcode-filter-color;
    }

    & .button-load-more {
      .custom-mixin-fade-border (@shortcode-filter-color, @opacity:10%);

      &:hover {
        .custom-mixin-fade-border (@shortcode-filter-color, @opacity:21%)
      }
    }
  }
}

.paginator:not(.paginator-more-button) a {
  .@{unique-shortcode-class-name} & {
    &:after {
      .custom-mixin-fade-bg (@shortcode-filter-accent, 100%);
    }
  }
}

.dt-css-grid {
  .@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
    grid-row-gap: @grid-posts-gap*2;
    grid-column-gap: @grid-posts-gap*2;
    grid-template-columns:repeat(auto-fill, minmax(@grid-post-min-width, 1fr));

    .cssgridlegacy.no-cssgrid &,
    .no-cssgridlegacy.no-cssgrid & {
      display: flex;
      flex-flow: row wrap;
      margin: -@grid-posts-gap;

      & .wf-cell {
        flex: 1 0 @grid-post-min-width;
        min-width: @grid-post-min-width;
        max-width: 100%;
        padding: @grid-posts-gap;
        box-sizing: border-box;
      }
    }
  }

  .@{unique-shortcode-class-name}.resize-by-browser-width & {
    //-ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(@desktop-columns-num, 1fr);
    grid-template-rows: auto;
    grid-column-gap: @grid-posts-gap*2;
    grid-row-gap: @grid-posts-gap*2;

    .cssgridlegacy.no-cssgrid &,
    .no-cssgridlegacy.no-cssgrid & {
      margin: -@grid-posts-gap;

      & .wf-cell {
        width: 100%/@desktop-columns-num;
        padding: @grid-posts-gap;
      }
    }
  }
}

@media screen and (max-width: 1199px) {
  .dt-css-grid {
    .@{unique-shortcode-class-name}.resize-by-browser-width & {
      grid-template-columns: repeat(@h-tablet-columns-num, 1fr);

      .cssgridlegacy.no-cssgrid &,
      .no-cssgridlegacy.no-cssgrid & {
        & .wf-cell {
          width: 100%/@h-tablet-columns-num;
        }
      }
    }
  }
}

@media screen and (max-width: 991px) {
  .dt-css-grid {
    .@{unique-shortcode-class-name}.resize-by-browser-width & {
      grid-template-columns: repeat(@v-tablet-columns-num, 1fr);

      .cssgridlegacy.no-cssgrid &,
      .no-cssgridlegacy.no-cssgrid & {
        & .wf-cell {
          width: 100%/@v-tablet-columns-num;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .dt-css-grid {
    .@{unique-shortcode-class-name}.resize-by-browser-width & {
      grid-template-columns: repeat(@phone-columns-num, 1fr);

      .cssgridlegacy.no-cssgrid &,
      .no-cssgridlegacy.no-cssgrid & {
        & .wf-cell {
          width: 100%/@phone-columns-num;
        }
      }
    }
  }

}

@media screen and (max-width: 568px) {
  .mixin (@a) when (isnumber(@a)) and (@a > 528) {
    grid-template-columns:repeat(auto-fill, minmax(528px, 1fr));
  }
  .dt-css-grid {
    .@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
      .mixin (@grid-post-min-width);
    }
  }
}

@media screen and (max-width: 420px) {
  .mixin (@a) when (isnumber(@a)) and (@a > 370) {
    grid-template-columns:repeat(auto-fill, minmax(100%, 1fr));
  }
  .dt-css-grid {
    .@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
      .mixin (@grid-post-min-width);

    }
  }
}

@media screen and (max-width: 320px) {
  .mixin (@a) when (isnumber(@a)) and (@a > 280) {
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  }
  .dt-css-grid {
    .@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
      .mixin (@grid-post-min-width);
    }
  }
}