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

$spacing-top-and-bottom: 40px;
$card-size-large: 466px;
$card-size-medium: 355px;
$card-size-small: 285px;

$card-size-mobile-small: 294px;
$card-size-mobile-medium: 356px;
$card-size-mobile-large: 390px;

$tab-line-height-desktop: 19px;
$tab-line-height-mobile: 15px;

$pricing-value-line-height: 33.6px;

$tab-vertical-padding-desktop: 14px;
$tab-vertical-padding-desktop-small: 10px;
$tab-horizontal-padding-desktop: 30px;

$tab-vertical-padding-mobile: 11px;
$tab-horizontal-padding-mobile: 20px;

$tab-vertical-offset-desktop: -(calc(($tab-line-height-desktop + ($tab-vertical-padding-desktop * 2)) / 2));
$tab-vertical-offset-desktop-small: -(calc(($tab-line-height-desktop + ($tab-vertical-padding-desktop-small * 2)) / 2));
$tab-vertical-offset-mobile: -(calc(($tab-line-height-mobile + ($tab-vertical-padding-mobile * 2)) / 2));

$wrapper-selector: ".featuredProduct_wrapper";

$box-shadow: 0 2px 8px 0 var(--card-shadow-color, rgba(0,1,0,0.2));

.featuredProduct {
    &_wrapper {
        position: relative;
        
        display: flex;
        flex-direction: column;
        padding-bottom: $spacing-top-and-bottom;

        // containerBackgroundColor
        &:before {
            @include full-window-width;
            content: "";
            background-color: var(--container-background-color, #EAEAEA);
            z-index: -1;
        }
    }

    &_tabContainer {
        position: relative;
        margin-top: $spacing-top-and-bottom;
    }

    &_tab {
        position: absolute;
        top: 0;
        z-index: 1;
        text-align: center;

        // tabBackgroundColor, tabBorderRadius, tabTextColor
        background-color: var(--tab-background-color, #474747);
        border-radius: var(--tab-border-radius, 8px);
        color: var(--tab-text-color, #FFFFFF);

        @include media-md-up {
            max-width: 50%;
            width: fit-content;

            font-size: $headingFontSize4;
            line-height: $tab-line-height-desktop;

            // tabPosition
            &--tab-left {
                left: 25%;
                transform: translate(-50%, $tab-vertical-offset-desktop);

                #{$wrapper-selector}--size-small & {
                    transform: translate(-50%, $tab-vertical-offset-desktop-small);
                }
            }

            &--tab-right {
                right: 25%;
                transform: translate(50%, $tab-vertical-offset-desktop);

                #{$wrapper-selector}--size-small & {
                    transform: translate(50%, $tab-vertical-offset-desktop-small);
                }
            }

            &--tab-center {
                left: 50%;
                transform: translate(-50%, $tab-vertical-offset-desktop);

                #{$wrapper-selector}--size-small & {
                    transform: translate(-50%, $tab-vertical-offset-desktop-small);
                }
            }

            #{$wrapper-selector}--size-small & {
                padding: $tab-vertical-padding-desktop-small $tab-horizontal-padding-desktop;
            }
    
            #{$wrapper-selector}--size-medium & {
                padding: $tab-vertical-padding-desktop $tab-horizontal-padding-desktop;
            }
    
            #{$wrapper-selector}--size-large & {
                padding: $tab-vertical-padding-desktop $tab-horizontal-padding-desktop;
            }
        }

        @include media-md-down {
            max-width: 50%;
            width: fit-content;

            font-size: $headingFontSize5b;
            line-height: $tab-line-height-mobile;
            padding: $tab-vertical-padding-mobile $tab-horizontal-padding-mobile;

            // tabPosition
            &--tab-left {
                left: 25%;
                transform: translate(-50%, $tab-vertical-offset-mobile);
            }

            &--tab-right {
                right: 25%;
                transform: translate(50%, $tab-vertical-offset-mobile);
            }

            &--tab-center {
                left: 50%;
                transform: translate(-50%, $tab-vertical-offset-mobile);
            }

            // on mobile and image position is left(above product), tab goes in the middle
            &--image-left {
                #{$wrapper-selector}--size-small & {
                    top: $card-size-mobile-small;
                }
        
                #{$wrapper-selector}--size-medium & {
                    top: $card-size-mobile-medium;
                }
        
                #{$wrapper-selector}--size-large & {
                    top: $card-size-mobile-large;
                }
            }

            // it tab overflows on mobile, ignore position and take full width minus the margins
            &--tab-full-width-mobile {
                max-width: 90%;
                width: max-content;

                left: 50%;
                transform: translate(-50%, $tab-vertical-offset-mobile);
            }
        }
    }

    &_content {
        box-sizing: border-box;
        width: 100%;
        height: 100%;

        // cardBorderColor, cardBorderRadius
        border: 1px solid var(--card-border-color, #EAEAEA);
        border-radius: var(--card-border-radius, 8px);
        overflow: hidden;

        // isShadowVisible
        &--with-shadow {
            box-shadow: $box-shadow;
        }

        display: flex;

        // imagePosition
        &--image-left {
            flex-direction: row-reverse;
        }

        &--image-right {
            flex-direction: row;
        }

        @include media-md-down {
            &--image-left {
                flex-direction: column-reverse;
            }
    
            &--image-right {
                flex-direction: column;
            }
        }

        // if there's a lot of content (title, description), 
        // allow to overflow instead of expanding container vertically
        @include media-md-up {
            #{$wrapper-selector}--size-small & {
                max-height: $card-size-small;
            }
    
            #{$wrapper-selector}--size-medium & {
                max-height: $card-size-medium;
            }
    
            #{$wrapper-selector}--size-large & {
                max-height: $card-size-large;
            }
        }
    }

    &_details {
        background-color: var(--product-background-color, #F5F5F5);
        flex-grow: 1;

        display: flex;
        flex-direction: column;
        
        @include media-md-up {
            max-width: 50%;

            #{$wrapper-selector}--size-small & {
                min-height: $card-size-small;
                padding: 32px 100px 20px 100px;
            }
    
            #{$wrapper-selector}--size-medium & {
                padding: 35px 100px 25px 100px;
                min-height: $card-size-medium;
            }
    
            #{$wrapper-selector}--size-large & {
                padding: 58px 124px 65px 110px;
                min-height: $card-size-large;
            }
        }
    
        @include media-md-down {
            max-width: 100%;

            #{$wrapper-selector}--size-small & {
                padding: 58px 30px 25px 30px;
                height: $card-size-mobile-small;
            }
    
            #{$wrapper-selector}--size-medium & {
                padding: 58px 30px 30px 30px;
                height: $card-size-mobile-medium;
            }
    
            #{$wrapper-selector}--size-large & {
                padding: 60px 30px 30px 30px;
                height: $card-size-mobile-large;
            }
        }

        // productTextAlignment
        &--align-topLeft {
            text-align: left;
            align-items: flex-start;
            justify-content: flex-start;
        }

        &--align-middleLeft {
            text-align: left;
            align-items: flex-start;
            justify-content: center;
        }

        &--align-bottomLeft {
            text-align: left;
            align-items: flex-start;
            justify-content: flex-end;
        }

        &--align-topCenter {
            text-align: center;
            align-items: center;
            justify-content: flex-start;
        }

        &--align-middleCenter {
            text-align: center;
            align-items: center;
            justify-content: center;
        }

        &--align-bottomCenter {
            text-align: center;
            align-items: center;
            justify-content: flex-end;
        }
    }

    &_image {
        position: relative;
        width: 100%;

        @include media-md-up {
            max-width: 50%;
        }

        @include media-md-down {
            max-width: 100%;

            #{$wrapper-selector}--size-small & {
                height: $card-size-mobile-small;
            }
    
            #{$wrapper-selector}--size-medium & {
                height: $card-size-mobile-medium;
            }
    
            #{$wrapper-selector}--size-large & {
                height: $card-size-mobile-large;
            }
        }

        background-color: var(--image-background-color, #EAEAEA);

        img {
            height: 100%;
            width: 100%;

            clip-path: var(--image-mask);
        }

        // imageSize
        &--image-scaleToFit {
            img {
                object-fit: contain;
            }
        }

        &--image-scaleToFill {
            img {
                object-fit: cover;
            }
        }
    }

    &_defaultImage {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    &_title {
        @include title-3;

        // productTitleColor
        color: var(--product-title-color, $title-color);

        @include media-md-up {
            #{$wrapper-selector}--size-small & {
                font-size: $headingFontSize1c;
                line-height: $headingLineHeightMedium2;
            }
    
            #{$wrapper-selector}--size-medium & {
                font-size: $headingFontSizeXLarge2;
                line-height: $headingLineHeightMedium2;
            }
    
            #{$wrapper-selector}--size-large & {
                font-size: $headingFontSizeXXLarge;
                line-height: $headingLineHeightMedium2;
            }
        }
        
        @include media-md-down {
            #{$wrapper-selector}--size-small & {
                font-size: $headingFontSize2;
                line-height: $headingLineHeightMedium;
            }
    
            #{$wrapper-selector}--size-medium & {
                font-size: $headingFontSize1;
                line-height: $headingLineHeightMedium2;
                margin-bottom: 0.5em;
            }
    
            #{$wrapper-selector}--size-large & {
                font-size: $headingFontSize1b;
                line-height: $headingLineHeightMedium;
                margin-bottom: 0.5em;
            }
        }
    }

    &_description {
        line-height: $headingLineHeightXLarge;

        // productDescriptionColor
        color: var(--product-description-color, $body-color);
    }

    &_pricing {
        // productPricingColor
        color: var(--product-pricing-color, $body-color);
        font-weight: bold;

        #{$wrapper-selector}--size-small & {
            margin-top: 12px;
        }

        #{$wrapper-selector}--size-medium & {
            margin-top: 15px;
        }

        #{$wrapper-selector}--size-large & {
            margin-top: 27px;
        }

        .pricing_caption {
            line-height: $headingLineHeightMedium2;
        }

        .pricing_value {
            line-height: $pricing-value-line-height;
            
            #{$wrapper-selector}--size-small & {
                font-size: $headingFontSizeLarge;
                margin-top: 3px;
            }
    
            #{$wrapper-selector}--size-medium & {
                font-size: $headingFontSizeXXLarge;
                margin-top: 11px;
            }
    
            #{$wrapper-selector}--size-large & {
                font-size: $headingFontSizeXXXLarge;
                margin-top: 13px;
            }
        }
    }

    &_button {
        white-space: nowrap;

        #{$wrapper-selector}--size-small & {
            margin-top: 10px;
        }

        #{$wrapper-selector}--size-medium & {
            margin-top: 20px;
        }

        #{$wrapper-selector}--size-large & {
            margin-top: 27px;
        }
    }
}
