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

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .block-product-link,
    .block-category-link {
        &.widget {
            display: block;
            margin-bottom: @indent__base;
        }
    }

    .block-product-link-inline {
        &.widget {
            margin: 0;
        }
    }

    .block.widget {
        .products-grid .product-item {
            margin-left: 2%;
            width: calc(~'(100% - 2%) / 2');

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

        .product-item-info {
            width: auto;
        }

        .pager {
            padding: 0;

            .toolbar-amount {
                float: none;
                .lib-font-size(12);
            }

            .pages-item-previous {
                padding-left: 0;
            }

            .pages-item-next {
                position: relative;
            }

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

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .sidebar .block-viewed-products-grid {
        .products-grid {
            .product-item {
                margin-left: 2%;
                width: calc(~'(100% - 2%) / 2');

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

            .product-item-photo {
                display: block;
                position: relative;
            }

            .product-item-details {
                margin: 0;
            }

            .product-item-info {
                text-align: center;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .block.widget .products-grid .product-item,
    .page-layout-1column .block.widget .products-grid .product-item,
    .page-layout-3columns .block.widget .products-grid .product-item {
        width: (100%/3);
    }

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

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

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .block.widget .products-grid .product-item {
        width: (100%/3);

        .sidebar & {
            margin-left: 0;
            width: 100%;

            .actions-secondary {
                display: block;
                padding: 10px 0;
            }
        }
    }

    .page-layout-1column .block.widget .products-grid .product-item {
        margin-left: 2%;
        width: calc(~'(100% - 6%) / 4');

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

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

    .page-layout-3columns .block.widget .products-grid .product-item {
        width: (100%/2);
    }

    .sidebar .block.widget .pager {
        .item:not(.pages-item-next):not(.pages-item-previous) {
            &:extend(.abs-no-display-desktop all);
        }

        .pages-item-next {
            padding: 0;

            .action {
                margin: 0;
            }
        }
    }
}

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

    .page-layout-1column .block.widget .products-grid .product-item {
        margin-left: 2%;
        width: calc(~'(100% - 8%) / 5');

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

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

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

    .block.widget .products-grid .product-items {
        margin: 0;
    }

    .block.widget .products-grid .product-item {
        margin-left: calc(~'(100% - 4 * 24.439%) / 3');
        padding: 0;
        width: 24.439%;

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