// Common/Global Styles
// Use this file for global styles that don't or won't have their own stylesheet
html,
body {
    height: 100%;
}

body {
    font-size: 16px;
    letter-spacing: $letter-spacing-primary;
    background-color: #fff;
    color: #4d5151;

    .container-fluid {
        .prevent-squish {
            overflow-x: unset;
        }

        &.fade-on-route-transition {
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 0 1.5rem;
        }

        // Set max-width on columns to prevent overly-wide
        // components on extra wide screens.
        .col-md-6 {
            max-width: 472px;

            @include media-breakpoint-up(xl) {
                max-width: 708px;
            }

            .col {
                max-width: 236px;

                &.one-list-card-width {
                    max-width: 472px;

                    @include media-breakpoint-up(xl) {
                        max-width: 66.6666666%;
                    }
                }
            }

            .shop-question {
                .col {
                    max-width: 472px;
                }
            }
        }

        .col-xl-4 {
            max-width: 472px;

            .col {
                max-width: 100%;
            }
        }

        //END set max-width on columns
    }

    .pointer {
        cursor: pointer;
    }

    .container,
    .container-fluid {
        overflow-x: hidden;
    }

    .sub-container {
        &.make-tall {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
        }
    }

    .sr-only {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .pac-container {
        z-index: 10000 !important;
    }

    div#app:has(~ div#onetrust-consent-sdk div#onetrust-banner-sdk[style]) {
        padding-bottom: 3rem;

        @include media-breakpoint-up(xl) {
            padding-bottom: unset;
        }

        div.modal.show {
            padding-bottom: 3rem;

            @include media-breakpoint-up(xl) {
                padding-bottom: unset;
            }
        }
    }

    div#app:has(~ div#onetrust-consent-sdk div#onetrust-banner-sdk[style*="display: none"]) {
        padding-bottom: 0;

        div.modal.show {
            padding-bottom: 0;
        }
    }
}

.modal-open {
    .container-fluid {
        &.fade-on-route-transition {
            overflow: hidden;
            height: auto;
        }
    }
}

#app {
    display: flex;
    flex-direction: column;
    height: 100dvh;

    >form {
        flex: 1 0 auto;
    }

    >.footer-menu-container {
        flex: 0 0 auto;
    }

    @include media-breakpoint-up(xs) {
        overflow: auto;
    }

    .iss-heritage-container-width {
        margin-left: auto;
        margin-right: auto;

        @include media-breakpoint-up(xs) {
            width: 100%;
        }

        @include media-breakpoint-up(md) {
            width: 46.25rem; // 740px
        }

        @include media-breakpoint-up(xl) {
            width: 63.75rem; // 1020px
        }
    }

    .iss-heritage-content-container-width {
        @include media-breakpoint-up(xs) {
            width: 100%;
        }

        @include media-breakpoint-up(md) {
            width: 58.33333333%;
        }
    }
}

:root {
    --iss-loader-color: white;
}