:where(:root), :host, .wa-theme-matter, .wa-light, .wa-dark .wa-invert {

    background-color: unset;

    --wa-line-height-condensed: 1.6;

    @keyframes fa-beat-fade {
        0%, to {
            opacity: var(--fa-beat-fade-opacity, .4);
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale(var(--fa-beat-fade-scale, 1.125));
        }
    }

    --hrst-blue-50: #f0f7ff;
    --hrst-blue-50-rgb: 240, 247, 255;
    --hrst-blue-100: #e1edfd;
    --hrst-blue-100-rgb: 225, 237, 253;
    --hrst-blue-200: #bcdbfb;
    --hrst-blue-200-rgb: 188, 219, 251;
    --hrst-blue-300: #80bef9;
    --hrst-blue-300-rgb: 128, 190, 249;
    --hrst-blue-300-hsl: 210, 90%, 60%;
    --hrst-blue-400: #3d9df3;
    --hrst-blue-400-rgb: 61, 157, 243;
    --hrst-blue-500: #1481e3;
    --hrst-blue-500-rgb: 20, 129, 227;
    --hrst-blue-600: #0764c2;
    --hrst-blue-600-rgb: 7, 100, 194;
    --hrst-blue-700: #07509d;
    --hrst-blue-700-rgb: 7, 80, 157;
    --hrst-blue-800: #0b4a8c;
    --hrst-blue-800-rgb: 11, 74, 140;
    --hrst-blue-800-hsl: 211, 85%, 30%;
    --hrst-blue-900: #0e3a6c;
    --hrst-blue-950: #0a2547;
    --hrst-blue-950-rgb: 10, 37, 71;

    /* Replacing the purple wa theme */
    --wa-color-brand-95: var(--hrst-blue-100); /* setting to 100 is intentional for contrast */
    --wa-color-brand-90: var(--hrst-blue-100);
    --wa-color-brand-80: var(--hrst-blue-200);
    --wa-color-brand-70: var(--hrst-blue-300);
    --wa-color-brand-60: var(--hrst-blue-400);
    --wa-color-brand-50: var(--hrst-blue-500);
    --wa-color-brand-40: var(--hrst-blue-600);
    --wa-color-brand-30: var(--hrst-blue-700);
    --wa-color-brand-20: var(--hrst-blue-800);
    --wa-color-brand-10: var(--hrst-blue-900);
    --wa-color-brand-05: var(--hrst-blue-950);
    --wa-color-brand: var(--hrst-dodger-blue-600);

    /* Replacing the purple wa theme */
    --wa-color-success-95: var(--hrst-green-50);
    --wa-color-success-90: var(--hrst-green-100);
    --wa-color-success-80: var(--hrst-green-200);
    --wa-color-success-70: var(--hrst-green-300);
    --wa-color-success-60: var(--hrst-green-400);
    --wa-color-success-50: var(--hrst-green-500);
    --wa-color-success-40: var(--hrst-green-600);
    --wa-color-success-30: var(--hrst-green-700);
    --wa-color-success-20: var(--hrst-green-800);
    --wa-color-success-10: var(--hrst-green-900);
    --wa-color-success-05: var(--hrst-green-950);
    --wa-color-success: var(--hrst-green-600);

    --wa-color-neutral-95: var(--hrst-secondary-50);
    --wa-color-neutral-90: var(--hrst-secondary-100);
    --wa-color-neutral-80: var(--hrst-secondary-200);
    --wa-color-neutral-70: var(--hrst-secondary-300);
    --wa-color-neutral-60: var(--hrst-secondary-400);
    --wa-color-neutral-50: var(--hrst-secondary-500);
    --wa-color-neutral-40: var(--hrst-secondary-600);
    --wa-color-neutral-30: var(--hrst-secondary-700);
    --wa-color-neutral-20: var(--hrst-secondary-800);
    --wa-color-neutral-10: var(--hrst-secondary-900);
    --wa-color-neutral-05: var(--hrst-secondary-950);
    --wa-color-gray: var(--hrst-secondary-600);

    --wa-color-danger-95: var(--hrst-red-50);
    --wa-color-danger-90: var(--hrst-red-100);
    --wa-color-danger-80: var(--hrst-red-200);
    --wa-color-danger-70: var(--hrst-red-300);
    --wa-color-danger-60: var(--hrst-red-400);
    --wa-color-danger-50: var(--hrst-red-500);
    --wa-color-danger-40: var(--hrst-red-600);
    --wa-color-danger-30: var(--hrst-red-800);
    --wa-color-danger-20: var(--hrst-red-800);
    --wa-color-danger-10: var(--hrst-red-900);
    --wa-color-danger-05: var(--hrst-red-950);
    --wa-color-red: var(--hrst-red-600);

    --wa-color-warning-95: var(--hrst-error-50);
    --wa-color-warning-90: var(--hrst-error-100);
    --wa-color-warning-80: var(--hrst-error-200);
    --wa-color-warning-70: var(--hrst-error-300);
    --wa-color-warning-60: var(--hrst-error-400);
    --wa-color-warning-50: var(--hrst-error-500);
    --wa-color-warning-40: var(--hrst-error-600);
    --wa-color-warning-30: var(--hrst-error-700);
    --wa-color-warning-20: var(--hrst-error-800);
    --wa-color-warning-10: var(--hrst-error-900);
    --wa-color-warning-05: var(--hrst-error-950);

    --wa-form-control-border-color: var(--hrst-secondary-400);
    --wa-tooltip-arrow-size: .475rem;

    /* Custom variants */

    *:is([variant="instructions"]) {
        --wa-color-border-loud: var(--hrst-blue-800);
        --wa-color-fill-quiet: var(--hrst-blue-100);
        --wa-color-on-loud: var(--hrst-blue-50);
        --wa-color-text-normal: var(--hrst-blue-800);
    }

    *:is([variant="error"]) {
        --wa-color-border-loud: var(--hrst-error-800);
        --wa-color-fill-quiet: var(--hrst-error-100);
        --wa-color-on-loud: var(--hrst-error-800);
        --wa-color-text-normal: var(--hrst-error-800);
    }

    wa-switch {
        /*--background-color-checked: var(--hrst-blue-700);*/
        /*--background-color: var(--hrst-blue-50);*/
        /*--border-color: var(--hrst-secondary-400);*/
        /*--thumb-color: var(--hrst-secondary-800);*/
        /*--thumb-color-checked: var(--hrst-secondary-100);*/
        /*--border-width: 2px;*/
    }

    /* improve contrast of disabled autoupdate inputs */

    wa-input, wa-select, wa-textarea {
        --wa-color-surface-raised: var(--hrst-secondary-50);
        --wa-form-control-label-color: var(--hrst-secondary-700);
        --wa-form-control-border-radius: 3px;
        --border-color: var(--hrst-secondary-200);
        --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--hrst-blue-400);
        --wa-color-focus: var(--hrst-primary-600);
    }

    wa-input[invalid=true],
    wa-input[custom-error],
    wa-select[invalid=true],
    wa-select[custom-error],
    wa-textarea[invalid=true],
    wa-textarea[custom-error] {
        --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--hrst-red-200);
        --wa-color-focus: var(--hrst-red-800);
        --border-color: var(--hrst-red-500) !important;
    }

    /* Fix the floating label not being long enough to cover the "placeholder" in a select */

    & input:where(:not([type="button"], [type="checkbox"], [type="color"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"])),
    & select, & textarea, & wa-input, & wa-select, & wa-textarea, & .wa-text-field {

        &::part(label) {
            background-color: transparent;
            backdrop-filter: blur(7px);
        }

        &:state(blank):not(:disabled):not(:focus, [placeholder])::part(label):not(:disabled) {
            background-color: var(--wa-form-control-background-color, white);
            width: calc(100% - 80px);
        }
    }

    wa-input:disabled::part(label),
    wa-select:disabled::part(label),
    wa-textarea:disabled::part(label) {
        backdrop-filter: blur(3px);
        color: var(--hrst-secondary-950);
        background-color: transparent;
        border-radius: .25rem;
    }

    wa-switch:disabled::part(base) {
        opacity: 0.9;
    }

    wa-switch:disabled::part(label) {
        color: var(--hrst-secondary-800);
    }

    wa-switch:disabled:state(checked)::part(thumb) {
        background-color: var(--hrst-secondary-50);
    }

    wa-switch:disabled::part(control) {
        border-color: var(--hrst-secondary-600);
    }

    wa-switch:disabled::part(thumb) {
        background-color: var(--hrst-secondary-500);
    }

    wa-switch:disabled:state(checked)::part(control) {
        background-color: var(--hrst-secondary-700);
        border-color: var(--hrst-secondary-700);
    }

    /** Fixes the webawesome issue with floating labels not covering input masks like in date fields */

    wa-input[type=date]::part(label) {
        min-width: 100px;
    }

    wa-input:disabled::part(input),
    wa-select:disabled::part(form-control-input),
    wa-textarea:disabled::part(textarea),
    wa-select:disabled::part(combobox),
    wa-select:disabled::part(display-input) {
        --border-color: var(--hrst-secondary-300);
        background: var(--hrst-secondary-100);
        color: var(--hrst-secondary-950);
        opacity: 1;
    }

    wa-details {
        border-radius: .375rem;
    }

    wa-callout {
        border-radius: .375rem;
    }

    wa-callout::part(message) {
        overflow: visible;
    }

    .btn {
        --wa-space: 8px;
    }

    .btn.rounded-circle {
        --wa-space: 0;
        padding-inline: unset;
    }

    .modal-header wa-button.close-button {
        --bs-modal-header-padding-y: 1rem;
        --bs-modal-header-padding-x: 1rem;
        margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto;
    }

    wa-tooltip {
        font-size: 14px;
    }

    wa-icon.icon-inline {
        vertical-align: middle;
    }

    wa-skeleton::part(indicator) {
        border-radius: 0.275rem;
    }
}

/* Add an instructions variant for wa-callouts per https://github.com/IntellectAbility/platform-common/issues/64 */
wa-callout:is([variant~="instructions"]) {
    font-size: var(--wa-font-size-s, .875rem);
    background-color: var(--wa-color-fill-quiet);
    border: 1px solid var(--wa-color-border-loud);
    border-radius: .125em !important;
}

.bounce {
    animation-name: fa-bounce;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: 1;
    animation-timing-function: var(--fa-animation-timing, cubic-bezier(.28, .84, .42, 1));
}

@keyframes fa-bounce {
    0% {
        transform: scale(1) translateY(0)
    }

    10% {
        transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0)
    }

    30% {
        transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em))
    }

    50% {
        transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0)
    }

    57% {
        transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em))
    }

    64% {
        transform: scale(1) translateY(0)
    }

    to {
        transform: scale(1) translateY(0)
    }
}