/* Product Comparisons: Calculation of total-width with native CSS */

/* The width must be calculated with the number of products and depending on the screen width. */
/* math function with css variables are not possible in the old less version of this project */
/* and less variables cannot have any dependency to class names or media-queries.*/
/* Therefore here a native css-solution */

/* A calculation of this width with JavaScript is too late for browser rendering with this scrollable table */

.comparison-wrapper .product-comparison table {
    --visible-columns: 2;
    width: calc((100% / var(--visible-columns)) * var(--total-columns));
}
.comparison-wrapper .product-comparison table.total-products-1 {
    --visible-columns: 1;
}

@media screen and (min-width: 768px) {
    .comparison-wrapper .product-comparison table {
        --visible-columns: 3;
        width: calc((100% / var(--visible-columns)) * (var(--total-columns) + 1)); /* +1 first column for attibutes-Titles */
    }
    .comparison-wrapper .product-comparison table.total-products-1 {
        --visible-columns: 2;
    }
}

@media screen and (min-width: 992px) {
    .comparison-wrapper .product-comparison table {
        --visible-columns: 4;
    }
    .comparison-wrapper .product-comparison table.total-products-2 {
        --visible-columns: 3;
    }
    .comparison-wrapper .product-comparison table.total-products-1 {
        --visible-columns: 2;
    }
}

@media screen and (min-width: 1200px) {
    .comparison-wrapper .product-comparison table {
        --visible-columns: 5;
    }
    .comparison-wrapper .product-comparison table.total-products-3 {
        --visible-columns: 4;
    }
    .comparison-wrapper .product-comparison table.total-products-2 {
        --visible-columns: 3;
    }
    .comparison-wrapper .product-comparison table.total-products-1 {
        --visible-columns: 2;
    }
}