.kite-alert {
        --dismiss-icon-color: var(--kite-alert-dismiss-icon-color);
        --global-caution-background-color: var(--kite-alert-global-caution-background-color);
        --global-caution-status-icon-color: var(--kite-alert-global-caution-status-icon-color);
        --global-caution-link-text-color: var(--kite-alert-global-caution-link-text-color);
        --global-caution-text-color: var(--kite-alert-global-caution-text-color);
        --global-negative-background-color: var(--kite-alert-global-negative-background-color);
        --global-negative-status-icon-color: var(--kite-alert-global-negative-status-icon-color);
        --global-negative-link-text-color: var(--kite-alert-global-negative-link-text-color);
        --global-negative-text-color: var(--kite-alert-global-negative-text-color);
        --global-neutral-text-color: var(--kite-alert-global-neutral-text-color);
        --global-neutral-background-color: var(--kite-alert-global-neutral-background-color);
        --global-neutral-status-icon-color: var(--kite-alert-global-neutral-status-icon-color);
        --global-neutral-link-text-color: var(--kite-alert-global-neutral-link-text-color);
        --page-background-color: var(--kite-alert-background-color);
        --page-border-color: var(--kite-alert-border-color);
        --page-link-text-color: var(--kite-alert-link-text-color);
        --page-text-color: var(--kite-alert-text-color);
        --page-caution-border-left-color: var(--kite-alert-caution-border-left-color);
        --page-caution-status-icon-color: var(--kite-alert-caution-status-icon-color);
        --page-negative-border-left-color: var(--kite-alert-negative-border-left-color);
        --page-negative-status-icon-color: var(--kite-alert-negative-status-icon-color);
        --page-info-border-left-color: var(--kite-alert-neutral-border-left-color);
        --page-neutral-border-left-color: var(--page-info-border-left-color, --kite-alert-neutral-border-left-color);
        --page-info-status-icon-color: var(--kite-alert-neutral-status-icon-color);
        --page-neutral-status-icon-color: var(--page-info-status-icon-color, var(--kite-alert-neutral-status-icon-color));
        --page-positive-border-left-color: var(--kite-alert-positive-border-left-color);
        --page-positive-status-icon-color: var(--kite-alert-positive-status-icon-color)
    }

    .kite-alert {
        --kite-button-margin-top: var(--kite-spacing-xs);
        --kite-button-secondary-text-color: var(--kite-color-primary);
        --kite-button-secondary-border-color: var(--kite-color-primary);
        --kite-button-secondary-hover-background-color: var(--kite-color-blue-30);
        --kite-button-secondary-hover-text-color: var(--kite-color-white);
        --kite-button-secondary-press-background-color: var(--kite-color-blue-30);
        --kite-button-secondary-press-text-color: var(--kite-color-white);
        --kite-button-secondary-focus-background-color: var(--kite-color-blue-30);
        --kite-button-secondary-focus-text-color: var(--kite-color-white);
        --kite-button-secondary-disabled-text-color: var(--kite-color-gray-25);
        --kite-button-secondary-disabled-border-color: var(--kite-color-gray-25);
        --kite-link-text-color: var(--page-link-text-color);
        --kite-link-hover-text-color: var(--kite-color-dark-blue-10);
        --kite-link-focus-text-color: var(--page-link-text-color);
        --kite-link-press-text-color: var(--kite-color-dark-blue-20);
        --kite-link-visited-text-color: var(--kite-color-dark-blue-10);
        border-width: var(--kite-alert-border-width)
    }

    .kite-alert--error {
        --global-background-color: var(--global-negative-background-color);
        --global-icon-color: var(--global-negative-status-icon-color);
        --global-link-text-color: var(--global-negative-link-text-color);
        --global-text-color: var(--global-negative-text-color);
        --page-icon-color: var(--page-negative-status-icon-color);
        --page-border-left-color: var(--page-negative-border-left-color);
        --passive-background-color: var(--kite-alert-passive-negative-background-color);
        --passive-border-color: var(--kite-alert-passive-negative-border-color);
        --passive-icon-color: var(--kite-alert-passive-negative-status-icon-color)
    }

    .kite-alert {
        background-color: var(--page-background-color);
        border-color: var(--page-border-color);
        border-radius: var(--kite-alert-border-radius);
        border-style: var(--kite-alert-border-style);
        box-shadow: var(--kite-alert-elevation);
        color: var(--page-text-color);
        flex-direction: column;
        font-size: var(--kite-alert-text-size);
        font-weight: var(--kite-alert-text-weight);
        padding: var(--kite-alert-padding-top) var(--kite-alert-padding-right) var(--kite-alert-padding-bottom) calc(var(--kite-alert-padding-left) + var(--kite-alert-border-left-width));
        text-align: var(--kite-alert-text-align);
        position: relative
    }

    .kite-alert:not(:first-child) {
        margin-top: var(--kite-alert-stacked-margin-top)
    }

    .kite-alert:before {
        background-color: var(--page-border-left-color);
        border-radius: var(--kite-alert-border-radius)0 0 var(--kite-alert-border-radius);
        content: "";
        position: absolute;
        top: calc(var(--kite-alert-border-width)*-1);
        bottom: calc(var(--kite-alert-border-width)*-1);
        left: calc(var(--kite-alert-border-width)*-1);
        width: var(--kite-alert-border-left-width)
    }

    @media (-ms-high-contrast:active),
    (forced-colors:active),
    (prefers-contrast:forced) {
        .kite-alert:before {
            background-color: CanvasText
        }
    }

    .kite-alert--active {
        display: flex
    }

    .kite-alert__inner {
        display: flex;
        flex-grow: 1
    }

    .kite-alert__message {
        flex-grow: 1
    }

    .kite-alert__icon {
        color: var(--page-icon-color);
        flex-shrink: 0;
        margin-right: var(--kite-alert-status-icon-margin-right);
        width: var(--kite-alert-status-icon-width);
        height: var(--kite-alert-status-icon-height)
    }

    .kite-alert__icon .kite-icon {
        --size: var(--kite-alert-status-icon-height)
    }

    @media only screen and (min-width:52.5rem) {}

    @media only screen and (min-width:52.5rem) {}

    @media only screen and (min-width:52.5rem) {}

    .kite-icon {
        --fill: currentColor;
        --color: var(--fill, currentColor);
        --offset: 0;
        contain: strict;
        display: inline-block;
        position: relative;
        bottom: calc(var(--offset)*.1em);
        width: var(--size);
        height: var(--size)
    }

    .kite-icon__inner {
        width: 100%;
        height: 100%
    }

    .kite-icon__inner svg {
        display: block;
        fill: var(--color);
        width: 100%;
        height: 100%
    }

    @media (-ms-high-contrast:active),
    (forced-colors:active),
    (prefers-contrast:forced) {
        .kite-icon__inner svg {
            fill: currentColor
        }
    }

    :root,
    .kite-theme {
        --kite-alert-focus-ring-color: var(--kite-focus-ring-color);
        --kite-alert-focus-ring-color-dark: var(--kite-focus-ring-color);
        --kite-alert-global-focus-ring-color: var(--kite-color-black)
    }

    .kite-alert {
        --kite-button-focus-ring-color: var(--kite-alert-focus-ring-color);
        --kite-button-focus-ring-color-dark: var(--kite-button-focus-ring-color);
        --kite-button-secondary-text-color-dark: var(--kite-button-secondary-text-color);
        --kite-button-secondary-border-color-dark: var(--kite-button-secondary-border-color);
        --kite-button-secondary-hover-background-color-dark: var(--kite-button-secondary-hover-background-color);
        --kite-button-secondary-hover-text-color-dark: var(--kite-button-secondary-hover-text-color);
        --kite-button-secondary-active-background-color-dark: var(--kite-button-secondary-active-background-color);
        --kite-button-secondary-active-text-color-dark: var(--kite-button-secondary-active-text-color);
        --kite-button-secondary-focus-background-color-dark: var(--kite-button-secondary-focus-background-color);
        --kite-button-secondary-focus-text-color-dark: var(--kite-button-secondary-focus-text-color);
        --kite-button-secondary-disabled-text-color-dark: var(--kite-button-secondary-disabled-text-color);
        --kite-button-secondary-disabled-border-color-dark: var(--kite-button-secondary-disabled-border-color);
        --kite-link-text-color-dark: var(--kite-link-text-color);
        --kite-link-hover-text-color-dark: var(--kite-link-hover-text-color);
        --kite-link-focus-text-color-dark: var(--kite-link-focus-text-color);
        --kite-link-press-text-color-dark: var(--kite-link-press-text-color);
        --kite-link-visited-text-color-dark: var(--kite-link-visited-text-color)
    }