@import '../../../styles/definitions/breakpoints';
@import '../../../styles/mixins';

$image-size-large: 192px;
$image-size-medium: 138px;
$image-size-small: 88px;

.productCard {
    &_container {
        display: flex;
    }
    &_imageWrapper {
        @include background-lightGray;
        display: flex;
        flex-shrink: 0;
        width: var(--final-image-size, $image-size-large);
        height: var(--final-image-size, $image-size-large);
        border-radius: 8px;
        overflow: hidden;

        @include media-lg-down {
            --final-image-size: #{$image-size-medium};
        }
            
        @include media-md-down {
            --final-image-size: #{$image-size-small};
        }

        &--medium  {
            --final-image-size: #{$image-size-medium};
                
            @include media-md-down {
                --final-image-size: #{$image-size-small};
            }
        }

        &--small, &--xsmall  {
            --final-image-size: #{$image-size-small};
        }
    }
    &_image {
        @include fit;
        width: 100%;
        height: 100%;
    }
    &_content {
        display: flex;
        flex-direction: column;

        @include media-md-up {
            padding-top: 20px;
        }
    }
    &_imageWrapper + &_content {
        margin-left: $grid-gutter-width * 2;
    }
    &_contentText {
        flex-grow: 1;
    }
    &_contentText + &_ratingWrapper {
        margin-top: 9px;
    }
    &_title {
        @include title-2;
        margin: 0;

        @include media-md-up {
            font-size: $headingFontSize1;
        }
        @include media-lg-up {
            font-size: $headingFontSizeLarge;
        }

        &--large {
            font-size: $headingFontSize1;

            @include media-md-up {
                font-size: $headingFontSizeLarge;
            }
            @include media-lg-up {
                font-size: $headingFontSizeXLarge;
            }
        }

        &--small {
            font-size: $headingFontSize3;

            @include media-md-up {
                font-size: $headingFontSize2;
            }
            @include media-lg-up {
                font-size: $headingFontSize1;
            }
        }

        &--xsmall {
            font-size: $headingFontSize5;

            @include media-md-up {
                font-size: $headingFontSize4;
            }
            @include media-lg-up {
                font-size: $headingFontSize3;
            }
        }
    }
    &_title + &_caption {
        margin-top: 10px;
    }
    &_caption {
        @include text(16px);
        @include color-darkGray;

        @include media-md-up {
            font-size: 18px;
        }
        @include media-lg-up {
            font-size: 20px;
        }

        &--large {
            font-size: $bodyFontSize3;

            @include media-md-up {
                font-size: $bodyFontSize2;
            }
            @include media-lg-up {
                font-size: $bodyFontSize1;
            }
        }
        &--small {
            font-size: $bodyFontSize5;

            @include media-md-up {
                font-size: $bodyFontSize4;
            }
            @include media-lg-up {
                font-size: $bodyFontSize3;
            }
        }
        &--xsmall {
            font-size: $bodyFontSize7;

            @include media-md-up {
                font-size: $bodyFontSize6;
            }
            @include media-lg-up {
                font-size: $bodyFontSize5;
            }
        }
    }
    &_ratingWrapper {
        @include text-6;
        @include color-title($dark-gray);
        display: flex;
        flex-wrap: wrap;
        line-height: 20px;
        word-wrap: break-word;
        margin-top: 15px;
    }
    &_starsWrapper + &_details {
        margin-left: 16px;
    }
    &_vendorTitle + &_vendorLabel {
        margin-left: 3px;
    }
    &_merchandisingBadges {
        display: flex;
        flex-wrap: wrap;

        img {
            margin-top: 6px;
            margin-right: 10px;
            height: 32px;
            width: 32px;
        }

        @include media-md-down {
            img {
                margin-right: 6px;
                height: 22px;
                width: 22px;
            }
        }
    }
}
