Product Grid Item: Slider Item

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

.product-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: $product-grid-item__width;
    border: $product-grid-item__border;
    padding: $product-grid-item__padding;
    padding-bottom: $product-grid-item__padding-bottom;
    z-index: 0 !important; //sass-lint:disable-line no-important
    @include mq($screen-m) {
        border: $product-grid-item__border\@medium;
    }
    .product {
        &.actions {
            .tocart {
                position: absolute;
                bottom: 10px;
                left: 10px;
                font-weight: $font-weight-bold;
            }
        }
        &.details {
            padding-left: 10px;
        }
    }
    &:hover {
        border: $product-grid-item__border-hover;
        @include mq($screen-m) {
            border: $product-grid-item__border-hover\@medium;
        }
    }

    @include isIE() {
        margin: $product-grid-item__IE-margin;
        width: $product-grid-item__IE-width;
        @include mq($screen-m) {
            width: $product-grid-item__IE-width\@medium;
        }
    }

    // styles for safari
    &:not(:root:root) {
        display: flex !important; // sass-lint:disable-line no-vendor-prefixes no-important
    }


    &--wishlist {
        .quantity-update__input {
            width: $product-grid-item__qty-input-width--wishlist;
            height: $product-grid-item__qty-button-size--wishlist;
            border-width: $product-grid-item__qty-input-border-width--wishlist;
            @include mq($screen-xl) {
                border-width: $product-grid-item__qty-input-border-width--wishlist\@xl;
                width: $product-grid-item__qty-input-width--wishlist\@xl;
            }
        }
        .quantity-update__button {
            width: $product-grid-item__qty-button-size--wishlist;
            height: $product-grid-item__qty-button-size--wishlist;
            display: none;
            @include mq($screen-xl) {
                display: flex;
            }
        }
        .product-grid-item__primary-action {
            width: $product-grid-item__primary-action-width--wishlist;
            margin: $product-grid-item__primary-action-margin--wishlist;
            @include mq($screen-m) {
                margin: $product-grid-item__primary-action-margin--wishlist\@medium;
            }
            .button {
                width: $product-grid-item__primary-action-width--wishlist;
                padding: $product-grid-item__primary-action-button-padding--wishlist;
            }
        }
        .product-grid-item__secondary-action {
            display: flex;
            justify-content: space-around;
            width: $product-grid-item__secondary-action-width--wishlist;
            @include mq($screen-m) {
                width: $product-grid-item__secondary-action-width--wishlist\@medium;
                align-items: flex-end;
            }
            @include mq($screen-xl) {
                width: $product-grid-item__secondary-action-width--wishlist\@xl;
            }
        }
    }

    &--slider-item {
        .product-grid-item__link {
            flex: 0;
        }

        .product-grid-item__details {
            flex: 1;
        }

        .product-grid-item__details-bottom {
            margin-top: auto;
        }

        @include isIE() {
            display: block;
            width: 100%;
        }

        .product-grid-item__image-wrapper {
            .image {
                width: $product-grid-item__image-wrapper-width--slider-item;

                @include isIE() {
                    width: auto;
                }
            }

            .lazyload,
            .lazyloading {
                width: $product-grid-item__image-wrapper-width--slider-item;
            }
        }

        .product-grid-item__price {
            &--full-width {
                @include mq($screen-m) {
                    width: 100%;
                }
            }
        }

        .product-grid-item__actions {
            &--zero-width {
                @include mq($screen-m) {
                    width: 0;
                }
            }
        }
    }

    &__badges {
        top: $product-grid-item__badges-top-position;
        left: $product-grid-item__badges-left-position;
        z-index: $product-grid-item__badges-z-index;
    }

    &__link {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        flex: 1 1 auto;
        align-items: center;
        align-self: stretch;

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

    &__image-wrapper {
        position: relative;
        transition: $product-grid-item__transition;
        width: 100%;
        .product-image-container {
            width: auto !important; // sass-lint:disable-line no-important
            position: unset !important; // sass-lint:disable-line no-important
        }
        .image {
            margin: $product-grid-item__image-margin;
            width: $product-grid-item__image-width;
            height: $product-grid-item__image-height;
            transition: $product-grid-item__transition;
        }
        .lazyload,
        .lazyloading {
            width: $product-grid-item__image-width--lazyload;
            height: $product-grid-item__image-height--lazyload;
        }
    }

    &__name {
        min-height: $product-grid-item__name-height;
        margin: $product-grid-item__name-margin;
        font-weight: $product-grid-item__name-font-weight;
        font-size: $product-grid-item__name-font-size;
        text-transform: $product-grid-item__name-text-decoration;
        width: 100%;
        @include mq($screen-s) {
            min-height: $product-grid-item__name-height\@small;
        }
        @include mq($screen-m) {
            font-size: $product-grid-item__name-font-size\@medium;
        }
        @include mq($screen-l) {
            width: 100%;
        }
    }

    &__name-link {
        display: block;
        color: $product-grid-item__name-color;
        text-decoration: none;
        line-height: $product-grid-item__name-line-height;
        &:hover {
            text-decoration: $product-grid-item__name-text-decoration-hover;
            color: $product-grid-item__name-color-hover;
        }
    }

    &__rating {
        margin-bottom: $product-grid-item__rating-margin-bottom;
        height: $product-grid-item__rating-height;
    }

    &__price {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        min-height: $product-grid-item__price-min-height;
        margin-bottom: 15px;
        @include mq($screen-m) {
            width: 50%;
            margin-bottom: 0;
        }
        .price-label {
            font-weight: $product-grid-item__price-label-font-weight;
        }
        .price__value:not(.price__value--between) {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            white-space: nowrap;
        }
    }

    &__details {
        padding: $product-grid-item__details-padding;
        margin: $product-grid-item__details-margin;
        flex-grow: 0;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-end;
        border: $product-grid-item__details-border;
        border-width: $product-grid-item__details-border-width;

        @include mq($screen-xl) {
            padding: $product-grid-item__details-padding\@xl;
        }
        .product-grid-item__stock-status--out-of-stock {
            display: none;
        }
    }

    &__details-bottom {
        display: flex;
        flex-flow: column wrap;
        justify-content: space-between;
        @include mq($screen-m) {
            flex-flow: row wrap;
        }
    }

    &__actions {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        width: 100%;
        @include mq($screen-m) {
            width: 50%;
        }

        .tocompare {
            display: none;
        }

        &--ee {
            justify-content: space-between;
            width: $product-grid-item-ee__actions-width;

            &.product-grid-item__actions--slider {
                .dropdown-list__content {
                    bottom: $product-grid-item-slider__dropdown-list-content-bottom;
                    top: $product-grid-item-slider__dropdown-list-content-top;
                }
            }

            .tocart {
                width: $product-grid-item-ee__tocart-width;
                height: $product-grid-item-ee__tocart-height;
            }

            .product-grid-item {
                &__secondary-action {
                    display: flex;
                    align-items: center;

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

                        &__text {
                            display: none;
                        }
                    }

                    .block-requisition-list {
                        margin: $product-grid-item-ee__requisition-margin;
                        order: 3;
                    }
                }
            }

            .button--wishlist {
                display: none;
            }

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

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

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

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

                &__icon {
                    display: none;
                }

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

                &__item {
                    position: relative;
                }
            }
        }
    }

    &__primary-action {
        margin: $product-gird-item__primary-margin;

        .button--add-to {
            @include mq($screen-m) {
                @include add-to-button(block);
            }
        }
    }

    // elements from product-grid-item--wishlist variant
    &__wishlist-action {
        margin: $product-grid-item__action-margin--wishlist;
        @include mq($screen-m) {
            display: flex;
            flex-flow: row wrap;
        }
    }

    &__wishlist-comment {
        width: $product-grid-item__comment-input-width--wishlist;
        margin: $product-grid-item__comment-margin--wishlist;
        @include mq($screen-m) {
            margin: $product-grid-item__comment-margin--wishlist\@medium;
        }
    }

    &__wishlist-qty {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        width: $product-grid-item__qty-width--wishlist;

        @include mq($screen-m) {
            flex-direction: column;
            align-items: flex-start;
            width: $product-grid-item__qty-width--wishlist\@medium;
        }
        @include mq($screen-xl) {
            width: $product-grid-item__qty-width--wishlist\@xl;
        }
    }

    .add-to-wishlist {
        @extend .button--icon-fill;
        position: absolute;
        top: 0;
        right: 0;
        background: $product-grid-item__action-wishlist-background;
        &:before {
            display: none;
        }
        &.button--icon-filled {
            @include button-fill-bg();
        }
    }

    .button--tocompare {
        background-color: $product-grid-item__tocompare-background-color;
        display: none;
    }
}