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

$namespace: '.productBanner';
$banner-padding-y-default: 44px;
$banner-padding-y-large: 114px;
$banner-padding-y-medium: 79px;
$banner-padding-y-small: 47px;
$banner-background-zindex: 1;

#{$namespace} {
    &_container {
        position: relative;
        align-items: center;
    }
    &_wrapper, &_breadCrumbs {
        position: relative;
        z-index: $banner-background-zindex + 1;
    }
    &_wrapper {
        padding-top: var(--final-container-padding, $banner-padding-y-default);
        padding-bottom: var(--final-container-padding, $banner-padding-y-default);

        @include media-lg-up {
            &--large {
                --final-container-padding: #{$banner-padding-y-large};
            }
            &--medium {
                --final-container-padding: #{$banner-padding-y-medium};
            }
            &--small {
                --final-container-padding: #{$banner-padding-y-small};
            }
        }
    }

    &_breadCrumbs {
        &:not(:empty) {
            padding-top: 12px;
    
            @include media-lg-up {
                padding-top: 18px;
            }
        }
    }
    &_row {
        display: flex;
        @include grid-row();
    }
    &_card, &_buttons {
        @include grid-item();
    }
    &_card {
        flex-grow: 1;
    }
    &_buttons {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        
        @include media-md-up {
            @include grid-width(4);
        }
        @include media-lg-up {
            @include grid-width(3);
        }
        @include media-md-down {
            display: none;
        }
    }
    &_backgroundWrapper {
        @include full-window-width;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: none;
        z-index: $banner-background-zindex;
    }
}

// Product Banner's theming (with knobs)
// Overwrite the styles here
$rating-namespace: '.rating';
$product-card-namespace: '.productCard';
$button-list-namespace: '.buttonsList';

#{$namespace}_container {
    &--light {
        color: $white;
        
        #{$rating-namespace} {
            &_rating, &_numberOfRatings {
                color: $white;
            }
            &_star--neutral #{$rating-namespace}_starItem path {
                fill: $white;
            }
        }
        #{$product-card-namespace} {
            &_vendorTitle, &_vendorLabel, &_title, &_caption {
                color: $white;
            }
        }
        #{$button-list-namespace} {
            &_caption a {
                color: $white;
            }

        }
    }
}
