// /**
//  * Copyright Â© Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  ---------------------------------------------

@product-name-link__color: @text__color;
@product-name-link__color__active: @text__color;
@product-name-link__color__hover: @text__color;
@product-name-link__color__visited: @text__color;

@product-name-link__text-decoration: none;
@product-name-link__text-decoration__active: @link__hover__text-decoration;
@product-name-link__text-decoration__hover: @link__hover__text-decoration;
@product-name-link__text-decoration__visited: @link__hover__text-decoration;

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    //  Product Lists
    .products {
        margin: @indent__l 0;
    }

    .product {
        &-items {
            font-size: 0;
            &:extend(.abs-reset-list all);
        }
        
        &-item {
            font-size: 1.4rem;
            vertical-align: top;
            
            .products-grid & {
                display: inline-block;
                margin-left: 2%;
                padding: 0;
                width: calc(~'(100% - 2%) / 2');
            }

            &:nth-child(2n + 1) {
                margin-left: 0;
            }
            
            &:extend(.abs-add-box-sizing all);

            &-name {
                &:extend(.abs-product-link all);
                -moz-hyphens: auto;
                -ms-hyphens: auto;
                -webkit-hyphens: auto;
                display: block;
                hyphens: auto;
                margin: @indent__xs 0;
                word-wrap: break-word;
            }

            &-info {
                max-width: 100%;
                width: 152px;
                
                .page-products & {
                    width: 240px;
                }
            }

            &-actions {
                font-size: 0;

                > * {
                    font-size: 1.4rem;
                }
                
                .actions-secondary {
                    display: inline-block;
                    font-size: 1.4rem;
                    vertical-align: middle;
                    white-space: nowrap;
                    > button.action {
                        .lib-button-reset();
                    }

                    > .action {
                        line-height: 35px;
                        text-align: center;
                        width: 35px;

                        &:extend(.abs-actions-addto-gridlist all);
                        &:before {
                            margin: 0;
                        }
                        
                        span {
                            &:extend(.abs-visually-hidden all);
                        }
                    }
                }

                .actions-primary {
                    display: inline-block;
                    vertical-align: middle;
                }
            }
            
            &-description {
                margin: @indent__m 0;
            }
            
            .product-reviews-summary {
                .rating-summary {
                    margin: 0 0 0 4px;
                }
                
                .reviews-actions {
                    font-size: @font-size__s;
                    margin-top: 5px;
                }
            }

            .price-box {
                margin: @indent__s 0 @indent__m;
                
                .price {
                    .lib-font-size(14);
                    font-weight: @font-weight__bold;
                    white-space: nowrap;
                }
                
                .price-label {
                    font-size: @font-size__s;

                    &:after {
                        content: ':';
                    }
                }
            }

            .special-price,
            .minimal-price {
                .price {
                    .lib-font-size(14);
                    font-weight: @font-weight__bold;
                }
                
                .price-wrapper {
                    display: inline-block;
                }
                
                .price-including-tax + .price-excluding-tax {
                    display: block;
                }
            }

            .special-price {
                display: block;
            }

            .old-price {
                .price {
                    font-weight: @font-weight__regular;
                }
            }

            .regular-price {
                .price-label {
                    display: none;
                }
            }

            .minimal-price {
                .price-container {
                    display: block;
                }
            }

            .minimal-price-link {
                margin-top: 5px;
                
                .price-label {
                    .lib-css(color, @link__color);
                    .lib-font-size(14);
                }
                
                .price {
                    font-weight: @font-weight__regular;
                }
            }

            .minimal-price-link,
            .price-excluding-tax,
            .price-including-tax {
                display: block;
                white-space: nowrap;
            }

            .price-from,
            .price-to {
                margin: 0;
            }

            .tocompare {
                .lib-icon-font-symbol(
                @icon-compare-empty
                );
            }

            .tocart {
                white-space: nowrap;
            }
        }
    }

    .price-container {
        .price {
            .lib-font-size(14);
        }

        .price-including-tax + .price-excluding-tax,
        .weee {
            margin-top: @indent__xs;
        }

        .price-including-tax + .price-excluding-tax,
        .weee,
        .price-including-tax + .price-excluding-tax .price,
        .weee .price,
        .weee + .price-excluding-tax:before,
        .weee + .price-excluding-tax .price {
            .lib-font-size(11);
        }

        .weee {
            &:before {
                content: '('attr(data-label) ': ';
            }
            
            &:after {
                content: ')';
            }
            
            + .price-excluding-tax {
                &:before {
                    content: attr(data-label) ': ';
                }
            }
        }
    }

    .products-list {
        .product {
            &-item {
                display: table;
                width: 100%;

                &-info {
                    display: table-row;
                }
                
                &-photo {
                    display: table-cell;
                    padding: 0 @indent__l @indent__l 0;
                    vertical-align: top;
                    width: 1%;
                }
                
                &-details {
                    display: table-cell;
                    vertical-align: top;
                }
            }
        }
        
        .product-image-wrapper {
            &:extend(.abs-reset-image-wrapper all);
        }
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .products-list .product {
        &-item {
            table-layout: fixed;

            &-photo {
                padding: 0 @indent__s @indent__s 0;
                width: 30%;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .product {
        &-item {
            .products-grid & {
                margin-bottom: @indent__l;
            }

            &-actions {
                display: block;

                .products-grid & {
                    margin: @indent__s 0;
                }

                .actions-primary + .actions-secondary {
                    > * {
                        white-space: normal;
                    }
                }
            }
        }
    }

    .products-grid .product-item {
        width: 100%/3;
    }

    .page-products,
    .page-layout-1column,
    .page-layout-3columns,
    .page-products.page-layout-1column,
    .page-products.page-layout-3columns {
        .products-grid {
            .product-item {
                margin-left: 2%;
                padding: 0;
                width: calc(~'(100% - 4%) / 3');

                &:nth-child(3n + 1) {
                    margin-left: 0;
                }
            }
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-products {
        .products-grid {
            .product-item {
                margin-left: 2%;
                padding: 0;
                width: calc(~'(100% - 4%) / 3');

                &:nth-child(3n + 1) {
                    margin-left: 0;
                }
            }
        }
    }

    .page-products.page-layout-1column {
        .products-grid {
            .product-item {
                width: 100%/4;
            }
        }
    }

    .page-products.page-layout-3columns {
        .products-grid {
            .product-item {
                width: 100%/2;
            }
        }
    }
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .products-grid {
        .product-item {
            width: 100%/5;
        }
    }

    .page-layout-1column {
        .products-grid {
            .product-item {
                width: 100%/6;
            }
        }
    }

    .page-layout-3columns {
        .products-grid {
            .product-item {
                width: 100%/4;
            }
        }
    }

    .page-products {
        .products-grid {
            .product-items {
                margin: 0;
            }
            
            .product-item {
                margin-right: 2%;
                padding: 0;
                width: calc(~'(100% - 6%) / 4');

                &:nth-child(3n + 1) {
                    margin-left: 2%;
                }

                &:nth-child(4n + 1) {
                    margin-right: 0;
                }
            }
        }
    }

    .page-products {
        &.page-layout-1column {
            .products-grid {
                .product-item {
                    margin-right: 0;
                    width: 100%/5;
                }
            }
        }

        &.page-layout-3columns {
            .products-grid {
                .product-item {
                    margin-right: 1%;
                    width: 32.667%;

                    &:nth-child(3n) {
                        margin-right: 1%;
                    }

                    &:nth-child(3n + 1) {
                        margin-right: 0;
                    }
                }
            }
        }
    }
}
