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

$box-shadow: 0 2px 8px 0 var(--shadow-color, rgba(0,1,0,0.2));
$content-width-desktop: 632px;

$wrapper-selector: ".heroStyle_wrapper";

.heroStyle {
    &_wrapper {
        position: relative;

        height: var(--height, 350px);

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        
        &:before {
            @include full-window-width;
            content: "";

            background-color: var(--background-color, #F4F4F4);
            background-position: center;
            background-size: cover;

            box-shadow: $box-shadow;
        }

        // textPosition
        &--position-topLeft {
            align-items: flex-start;
            justify-content: flex-start;
        }

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

        &--position-topRight {
            align-items: flex-start;
            justify-content: flex-end;
        }

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

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

        &--position-middleRight {
            align-items: center;
            justify-content: flex-end;
        }

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

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

        &--position-bottomRight {
            align-items: flex-end;
            justify-content: flex-end;
        }
    }

    &_backgroundImage {
        object-fit: cover;
        max-width: inherit;

        &--scaleToFitPage {
            @include page-width;
        }

        &--scaleToFitScreen {
            @include full-window-width;
        }
    }

    &_backgroundImageOverlay {
        &--scaleToFitPage {
            @include page-width;
        }

        &--scaleToFitScreen {
            @include full-window-width;
        }

        background-color: var(--overlay-color, rgba(0,0,0,0.4));
    }

    &_content {
        max-width: $content-width-desktop;
        width: 100%;

        position: relative;

        display: flex;
        flex-direction: column;
        justify-content: center;

        @include media-md-up {
            &--height-large, &--height-xlarge {
                margin: 36px 110px 36px 110px;
            }

            &--height-medium {
                margin: 23px 110px 23px 110px;
            }

            &--height-small, &--height-xsmall {
                margin: 18px 110px 18px 110px;
            }
        }

        @include media-md-down {
            &--height-xlarge {
                margin: 36px 30px 36px 30px;
            }

            &--height-large {
                margin: 32px 30px 32px 30px;
            }

            &--height-medium {
                margin: 24px 30px 24px 30px;
            }

            &--height-small, &--height-xsmall {
                margin: 20px 30px 20px 30px;
            }
        }
        
        // textAlignment
        &--align-center {
            text-align: center;
            align-items: center;
        }

        &--align-left {
            text-align: left;
            align-items: flex-start;
        }

        &--align-right {
            text-align: right;
            align-items: flex-end;
        }
    }

    &_tagline {
        color: var(--tagline-color, #474747);

        font-weight: bold;

        @include media-md-up {
            line-height: 1.2;
            font-size: 22px;

            &--text-size-small {
                margin-bottom: 20px;
            }
    
            &--text-size-medium {
                margin-bottom: 30px;
            }
    
            &--text-size-large {
                margin-bottom: 35px;
            }
        }

        @include media-md-down {
            line-height: 1.2;
            font-size: 18px;

            &--text-size-small {
                margin-bottom: 20px;
            }
    
            &--text-size-medium {
                margin-bottom: 30px;

                #{$wrapper-selector}--height-xsmall & {
                    margin-bottom: 15px;
                }
            }

            &--text-size-large {
                margin-bottom: 35px;
            }
        }

    }

    &_title {
        @include title-3;

        color: var(--title-color, #474747);
        line-height: 1.2;

        @include media-md-up {
            &--text-size-small {
                font-size: 35px;
            }
    
            &--text-size-medium {
                font-size: 42px;
            }
    
            &--text-size-large {
                font-size: 48px;
            }
        }

        @include media-md-down {
            &--text-size-small {
                font-size: 20px;
            }
    
            &--text-size-medium {
                font-size: 24px;
            }
    
            &--text-size-large {
                font-size: 26px;
            }
        }

    }

    &_text {
        color: var(--description-color, #474747);

        @include media-md-up {
            font-size: 20px;
            line-height: 1.4;

            &--text-size-small {
                font-size: 18px;
                margin-bottom: 20px;
            }
    
            &--text-size-medium {
                margin-bottom: 35px;
            }
    
            &--text-size-large {
                margin-bottom: 40px;
            }
        }

        @include media-md-down {
            font-size: 16px;
            line-height: 1.5;

            &--text-size-small {
                margin-bottom: 20px;
            }
    
            &--text-size-medium {
                margin-bottom: 25px;

                #{$wrapper-selector}--height-xsmall & {
                    margin-bottom: 20px;
                }
            }
    
            &--text-size-large {
                margin-bottom: 30px;
            }
        }
    }

    &_buttonContainer {
        display: flex;
        flex-direction: row;
        gap: 15px;

        @include media-md-down {
            flex-direction: column;
            align-items: flex-start;
        }
    }
    &_button {
        white-space: nowrap;
    }

    &_divider {
        margin-top: 30px;
    }

    &_iconLink {
        width: 10px;
        margin-left: 5px;
    }
}
