Product List Item

@import 'product-list-item-variables';

.product-list-item {
    position: relative;
    display: flex;
    align-items: stretch;
    border-style: $product-list-item__border-style;
    border-width: $product-list-item__border-width;
    border-color: $product-list-item__border-color;
    padding: $product-list-item__padding;
    @include darken-layout-hover('.product-list-item__image-link .lazyload-wrapper');

    @include mq($screen-m) {
        padding: $product-list-item__padding\@medium;
    }

    &__image {
        transition: $product-list-item__transition;

        .image {
            transition: $product-list-item__transition;
        }
    }

    &__image-link {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        max-width: $product-list-item__image-width;
        margin: $product-list-item__image-margin;
        text-decoration: $product-list-item__image-link-decoration;

        @include mq($screen-m) {
            margin: $product-list-item__image-margin\@medium;
            flex-basis: $product-list-item__image-width\@medium;
            max-width: $product-list-item__image-width\@medium;
        }

        @include mq($screen-xl) {
            margin: $product-list-item__image-margin\@xl;
        }

        &:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: transparent;
            transition: $product-list-item__transition;
        }
    }

    &__badges {
        z-index: $product-list-item__badges-z-index;
        left: $product-list-item__badges-left;
        bottom: $product-list-item__badges-bottom;

        @include mq($screen-m) {
            top: $product-list-item__badges-top\@medium;
            bottom: $product-list-item__badges-bottom\@medium;
        }
    }

    &__main {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: $product-list-item__main-width;
        max-width: $product-list-item__main-width;

        @include mq($screen-m) {
            display: flex;
            flex-basis: $product-list-item__main-width\@medium;
            max-width: $product-list-item__main-width\@medium;
        }
    }

    &__details {
        display: flex;
        align-items: flex-start;
        flex-direction: column;

        @include mq($screen-m) {
            flex-grow: 1;
            flex-shrink: 1;
        }
    }

    &__name {
        margin: $product-list-item__name-margin;
        font-size: $product-list-item__name-font-size;

        @include mq($screen-m) {
            margin: $product-list-item__name-margin\@medium;
            font-size: $product-list-item__name-font-size\@medium;
        }
    }

    &__name-link {
        display: block;
        text-decoration: $product-list-item__name-decoration;
        text-transform: $product-list-item__name-text-transform;
        &:hover {
            color: $product-list-item__name-color-hover;
            text-decoration: $product-list-item__name-decoration-hover;

        }
    }

    &__sku {
        font-size: $product-list-item__sku-font-size;
        color: $product-list-item__sku-color;
        margin: $product-list-item__sku-margin;

        @include mq($screen-m) {
            font-size: $product-list-item__sku-font-size\@medium;
        }
    }

    &__description {
        color: $product-list-item__description-color;
        font-size: $product-list-item__description-font-size;
        margin: $product-list-item__description-margin;
        @include mq($screen-m) {
            font-size: $product-list-item__description-font-size\@medium;
        }
    }

    &__list {
        display: $product-list-item__list-display;
        margin: $product-list-item__list-margin;
        color: $product-list-item__list-color;
        font-size: $product-list-item__list-font-size;

        @include mq($screen-m) {
            display: $product-list-item__list-display\@medium;
            margin: $product-list-item__list-margin\@medium;
            font-size: $product-list-item__list-font-size\@medium;
        }

        dl {
            @extend .list--description;
            color: $product-list-item__list-color;
        }

        dt {
            @extend .list__label;
            @extend %bullet;
            position: relative;
            padding: $product-list-item__list-label-padding;
        }

        dd {
            @extend .list__value;
        }

    }

    &__actions {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
        align-items: center;

        @include mq($screen-m) {
            flex-grow: 1;
            justify-content: flex-end;
            align-items: flex-start;
        }
    }

    &__actions-inner {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;

        .button--icon:not(.button--add-to) {
            margin: $product-list-item__action-margin;

            @include mq($screen-m) {
                margin: $product-list-item__action-margin\@medium;
            }

        }

        &--ee {
            display: flex;
            align-items: center;

            .button--tocompare {
                background-color: $product-list-item-ee__tocompare-background-color;
            }

            .button {
                justify-content: center;
                order: 1;

                &__text {
                    display: none;
                }
            }

            .product-list-item__add-to-action {
                flex-grow: 0;
                width: auto;
                order: 4;

                .button {
                    .button__text {
                        display: none;

                        @include mq($screen-xl) {
                            display: block;
                        }
                    }

                    .button__icon {
                        display: block;

                        @include mq($screen-xl) {
                            display: none;
                        }
                    }
                }
            }

            .block-requisition-list {
                order: 3;
            }

            .product-view {
                &__update-wishlist {
                    display: none;
                }

                &__multiwishlist {
                    width: $product-list-item-ee__multiwishlist-width;
                    margin: $product-list-item-ee__multiwishlist-margin;
                    order: 2;

                    .dropdown-list__label {
                        justify-content: center;
                    }
                }
            }

            .dropdown-list {
                &__content {
                    top: $product-list-item-ee__dropdown-list-content-top;
                    bottom: $product-list-item-ee__dropdown-list-content-bottom;
                    width: $product-list-item-ee__dropdown-list-content-width;

                    @include mq($screen-m) {
                        width: $product-list-item-ee__dropdown-list-content-width\@medium; 
                    }
                }

                &__icon {
                    display: none;
                }

                &__label {
                    width: $product-list-item-ee__dropdown-list-label-width;
                    height: $product-list-item-ee__dropdown-list-label-height;
                }

                &__item {
                    position: relative;
                }
            }
        }
    }

    &__price {
        width: $product-list-item__price-width;
        .price {
            display: flex;
            flex-flow: column nowrap;
        }

        @include mq($screen-m) {
            margin: $product-list-item__price-margin\@medium;
            text-align: $product-list-item__price-align;

            .price {
                align-items: flex-end;
            }

            .price__value {
                font-size: $product-list-item__price-font-size\@medium;

                &--old {
                    margin: $product-list-item__price-old-margin\@medium;
                    font-size: $product-list-item__price-old-font-size\@medium;
                }
            }
        }
    }

    &__add-to-action {
        flex-grow: 1;
        max-width: 250px;

        @include mq($screen-m) {
            flex-grow: 0;
        }

        .button--add-to {
            @include add-to-button($product-list-item__add-to-icon-display);
            padding: $spacer;

            @include mq($screen-m) {
                @include add-to-button($product-list-item__add-to-icon-display\@medium);
            }

            @include mq($screen-xl) {
                @include add-to-button($product-list-item__add-to-icon-display\@xl);
            }
        }
    }

    &__stock {
        display: $product-list-item__stock-display;
        width: $product-list-item__stock-width;
        justify-content: $product-list-item__stock-text-aligment;
        padding: $product-list-item__stock-padding;
        text-transform: $product-list-item__stock-text-transform;
        text-decoration: $product-list-item__stock-decoration;

        @include mq($screen-m) {
            display: $product-list-item__stock-display\@medium;
            justify-content: $product-list-item__stock-text-aligment\@medium;
        }

        &:hover {
            text-decoration: $product-list-item__stock-text-decoration-hover;
        }
    }

    .button--wishlist {
        &.button--icon-filled {
            @include button-fill-bg();
            
            &.button--icon-filled {
                @extend .button--icon-fill;
                @include button-fill-bg();

                &:hover,
                &:active {
                    &:before {
                        background-color: $product-list-item__wishlist-filled-bg-color-hover;
                    }

                    &:after {
                        display: block;
                        background-image: $product-list-item__wishlist-filled-bg-image-after-hover;
                    }
                    
                    .icon {
                        fill: $white;
                    }
                }
            }
        }
    }

    &__rating {
        .review__amount,
        .review__summary-add {
            display: none;
        }
    }

    // swatch & loader
    .swatch {
        &__container--catalog {
            .loader__icon {
                margin:  $product-list-item__swatch-loader-icon-margin;
            }
        }

        &__wrapper {
            justify-content: flex-end;
        }
    }
}