DigitalConsumer.ISS/src/styles/common-styles.scss

// 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: $body-color;

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

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

    .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(lg) {
            width: 60rem; // 960px
        }

        @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(lg) {
            width: 58.33333333%;
        }
    }

    div.textbox-question {
        label {
            span.sub-caption {
                color: #525656;
                font-weight: 400;
            }
        }
    }

    .site-sub-header-container {
        margin-top: 1.25rem;
    }
}

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

//Button Styles
$heritage-btn-border-radius: 1.40625rem; // 22.5px
$heritage-btn-height: 2.8125rem; // 45px
$heritage-btn-width: 9.0625rem; // 145px

.btn {
    position: relative;
    --bs-btn-font-weight: 600;
    min-height: $heritage-btn-height;
    min-width: $heritage-btn-width;
    letter-spacing: inherit;
    line-height: .94;

    @include heritage-btn-variant('primary', $white, $heritage-blue-primary, transparent, true);
    @include heritage-btn-variant('success', $white, $green, transparent, true);
    @include heritage-btn-variant('navigation', $white, $green, transparent, true);
    @include heritage-btn-variant('secondary', $white, $heritage-blue-secondary, transparent, true);
    @include heritage-btn-link('link', $blue, transparent, $heritage-blue-secondary);

    @include heritage-btn-size('lg', 0.625rem, 1.25rem);
    @include heritage-btn-size('md', 7px, 15px);
    @include heritage-btn-size('sm', 3px, 6px);
    @include heritage-btn-size('xs', 1px, 5px);

    &.btn-link {
        --bs-btn-padding-x: 0px;
        text-decoration: none;

        &:hover,
        &:focus {
            text-decoration: underline;
        }

        &.disabled,
        &[disabled],
        fieldset[disabled] {
            text-decoration: none;
        }
    }

    &.delay {
        // fixes flicker while transitioning between states
        transition: background 0s 0s ease-in-out;
    }
}

a.router-link {
    color: $heritage-blue-primary;
    text-decoration: none;
    font-weight: $font-weight-bold;

    &:hover,
    &:focus {
        color: #125b7e;
        text-decoration: underline;
    }
}

a.phone-link {
    color: $heritage-blue-primary;
    text-decoration: none;
    font-weight: $font-weight-normal;

    &:hover,
    &:focus {
        color: #125b7e;
        text-decoration: underline;
    }
}