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

//
//  Default appearance styles
//  _____________________________________________

[data-content-type='products'],
.pagebuilder-products {
    .pagebuilder-products-placeholder {
        align-items: center;
        background-color: @color-gray98;
        display: flex;
        justify-content: center;
        min-height: 300px;

        .placeholder-text {
            color: @color-gray65-lighten;
            font-size: 20px;
            font-weight: lighter;
        }
    }

    .products-grid {
        margin-left: -20px;
    }

    .product-item {
        display: inline-block;
        max-width: 100%;
        min-width: 50px;
        padding-left: 20px;
        text-align: left;
        vertical-align: top;
        width: 200px;

        a,
        button,
        .swatch-attribute-options {
            pointer-events: none;
        }

        .price-box {
            margin: @indent__s 0 @indent__m;
            word-wrap: break-word;

            .price {
                font-weight: @font-weight__bold;
            }

            .price-label {
                .lib-css(color, @color-gray40);
                font-size: @font-size__s;
            }
        }

        .old-price {
            margin: @indent__xs 0;

            .price {
                font-weight: normal;
            }
        }

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

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

        .minimal-price-link {
            margin-top: @indent__xs;
        }

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

        .map-old-price {
            display: inline-block;

            &:not(:last-child) {
                margin-right: @indent__s;
            }

            .price-wrapper {
                text-decoration: line-through;
            }
        }

        .map-fallback-price {
            display: none;
        }

        .actions-primary {
            display: inline-block;
            max-width: 100%;

            + .actions-secondary {
                display: inline-block;
                padding-left: 10px;
                vertical-align: middle;

                > .action {
                    color: @color-very-dark-gray;
                    display: inline-block;
                    font-weight: 600;
                    letter-spacing: .05em;
                    margin-right: 10px;
                    text-decoration: none;
                    text-transform: uppercase;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }

        .action {
            max-width: 100%;
            &.tocart {
                .lib-font-size(13px);
                border-radius: 0;
                line-height: 1;
                padding-bottom: @indent__s;
                padding-top: @indent__s;
                > span {
                    white-space: normal;
                    word-wrap: break-word;
                }
            }

            &.primary {
                background: @color-blue1;
                background-image: none;
                border: 1px solid @color-blue1;
                box-sizing: border-box;
                color: @color-white;
                cursor: pointer;
                display: inline-block;
                font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 1.4rem;
                font-weight: 600;
                padding: 7px 15px;
                vertical-align: middle;
            }

            &.towishlist,
            &.tocompare {
                &:before {
                    -moz-osx-font-smoothing: grayscale;
                    -webkit-font-smoothing: antialiased;
                    color: inherit;
                    display: inline-block;
                    font-family: 'luma-icons';
                    font-size: 16px;
                    font-weight: normal;
                    line-height: 16px;
                    margin: -2px 5px 0 0;
                    overflow: hidden;
                    speak: none;
                    text-align: center;
                    vertical-align: middle;
                }

                span {
                    border: 0;
                    clip: rect(0, 0, 0, 0);
                    height: 1px;
                    margin: -1px;
                    overflow: hidden;
                    padding: 0;
                    position: absolute;
                    width: 1px;
                }
            }

            &.towishlist {
                .lib-icon-font-symbol(@_icon-font-content: @icon-wishlist-full, @_icon-font-position: before);
            }

            &.tocompare {
                .lib-icon-font-symbol(@_icon-font-content: @icon-compare-full, @_icon-font-position: before);
            }
        }
    }

    .product-item-name {
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        display: block;
        font-weight: 400;
        hyphens: auto;
        margin: @indent__xs 0;
        word-wrap: break-word;

        > a {
            color: @color-gray20;
        }
    }

    .product-item-info {
        max-width: 100%;
        width: auto;
    }

    .product-item-description {
        margin: @indent__m 0;
    }

    .product-reviews-summary {
        margin-bottom: @indent__s + @indent__xs;

        .reviews-actions {
            display: inline-block;
            font-size: @font-size__s;
            margin-top: 5px;
            vertical-align: middle;

            a:not(:last-child) {
                margin-right: 30px;
            }
            .action.add {
                white-space: nowrap;
            }
        }

        .rating-summary {
            .lib-rating-summary(@_icon-font: 'luma-icons', @_icon-font-size: 16px, @_icon-letter-spacing: 2px);
            .lib-rating-summary-label-hide();

            display: inline-block;
            margin: 0 4px 0 0;
            vertical-align: middle;
        }
    }

    .product-item-actions {
        margin: -10px 0 10px;
    }

    .product-image-wrapper {
        display: block;
        height: 0;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

    .product-image-container {
        display: inline-block;
        max-width: 100%;
    }

    .product-image-photo {
        bottom: 0;
        display: block;
        height: auto;
        left: 0;
        margin: auto;
        max-width: 100%;
        position: absolute;
        right: 0;
        top: 0;
    }

    .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) ': ';
                }
            }
        }
    }

    .swatch-attribute {
        box-sizing: content-box;

        &:last-child {
            margin-bottom: 2rem;
        }
    }
}

.admin__field-product-tooltip {
    [data-role='spinner'] {
        display: inline-block;
    }

    .admin__field-tooltip-content ul {
        padding-left: 17px;
        padding-top: 10px;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
    .pagebuilder-products {
        .product-item {
            margin-left: calc(~'(100% - 5 * (100%/6)) / 4');

            &:nth-child(4n + 1) {
                margin-left: calc(~'(100% - 5 * (100%/6)) / 4');
            }

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