.systemMessage__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap--md);

    @media @screen-xl {
        gap: var(--gap--lg);
    }
}

.systemMessage--error {
    --message-color: rgb(var(--foreground--critical-high-default--light));
    --message-icon: @shp-alert;
}

.systemMessage--alert {
    --message-color: rgb(var(--foreground--warning-medium-default--light));
    --message-icon: @shp-tip;
}

.systemMessage--success {
    --message-color: rgb(var(--foreground--success-high-default--light));
    --message-icon: @shp-checkmark;
}

.systemMessage--notice {
    --message-color: rgb(var(--foreground--notice-medium-default--light));
    --message-icon: @shp-info;
}

.systemMessage {
    --systemMessageAnimationDuration: 200ms;
    --systemMessageAnimationOrigin: translateY(var(--offset--sm));

    position: relative;

    margin: var(--margin--md) 0;
    padding: var(--padding--md) var(--padding--4xl) var(--padding--md) var(--padding--md);

    font-size: var(--fontSize--body-large);

    background-color: rgb(var(--background--neutral-base-default--light));
    border: 2px solid var(--message-color);
    border-radius: var(--borderRadius--sm);

    .message-hidden & {
        display: none;
    }

    .systemMessage__wrapper & {
        margin: 0;
    }

    a {
        color: rgb(var(--foreground--links-strong-default--light));

        @media (hover: hover) {
            &:hover {
                color: rgb(var(--foreground--links-strong-hovered--light));
                text-decoration: underline
            }
        }
    }

    &[data-state='opened'] {
        animation: systemMessageSlideIn var(--systemMessageAnimationDuration) forwards;
    }

    &[data-state='closed'] {
        animation: systemMessageSlideOut var(--systemMessageAnimationDuration) ease-in forwards;
    }

    @media @screen-md {
        padding: var(--padding--lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .systemMessage {
        --systemMessageAnimationDuration: 0ms;
    }
}

@keyframes systemMessageSlideIn {
    from {
        transform: var(--systemMessageAnimationOrigin);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes systemMessageSlideOut {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }

    to {
        transform: var(--systemMessageAnimationOrigin);
        opacity: 0;
    }
}

.systemMessage__content {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--gap--sm);

    &::before {
        content: var(--message-icon);

        transform: translateZ(0);
        
        font-family: var(--fontFamily--icons);
        font-size: var(--size--xl);
        color: var(--message-color);
    }

    // Base `.typography` mirrors the `h2`–`h6` group so any heading keeps the body font after a
    // heading-level shift, regardless of its appearance. Harmless on body copy (already body font).
    h2, h3, h4, h5, h6,
    .typography {
        font-family: var(--fontFamily--body);
    }

    h2,
    .typography__headline2 {
        margin-bottom: var(--margin--xs);

        font-size: var(--fontSize--strong-large);
        font-weight: var(--fontWeight--strong-large);
        line-height: var(--lineHeight--strong-large);
        color: var(--message-color);
        text-transform: uppercase;
        letter-spacing: var(--letterSpacing--strong-large);
    }

    @media @screen-md {
        flex-wrap: nowrap;
    }
}

.systemMessage__text {
    transform: translateZ(0);
    align-self: center;
    width: calc(100% - 32px);

    > h2:only-child,
    > .typography__headline2:only-child {
        margin-bottom: 0;
    }

    p {
        margin: 0 0 var(--margin--sm);

        &:last-child {
            margin: 0;
        }
    }

    @media @screen-md {
      max-width: 1024px;
      margin-right: auto;
    }
}

.systemMessage__textDescription {
    display: flex;
    flex-direction: column;
    gap: var(--gap--sm);
}

.systemMessage__textDescription > p {
    margin: 0;
}

.systemMessage__buttons {
    display: flex;
    gap: var(--gap--sm);
    align-items: flex-start;
    margin-left: 32px;

    a:hover {
        text-decoration: none;
    }

    > :not(.systemMessage__close) {
        transform: translateZ(0);
        margin-top: var(--margin--sm);

        @media @screen-md {
            margin-top: 0;
        }
    }

    @media @screen-md {
        flex-shrink: 0;
        max-width: 50%;
        margin-left: 8px;
    }
}

.systemMessage__close {
    position: absolute;
    top: var(--offset--md);
    right: var(--offset--md);

    width: 24px;
    height: 24px;

    &::before {
        content: @shp-cross;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        font-family: var(--fontFamily--icons);
        font-size: var(--size--xl);
        color: rgb(var(--foreground--neutral-medium-default--light));

        transition: color 0.2s ease-out;
    }

    @media (hover: hover) {
        &:hover::before {
            color: rgb(var(--foreground--neutral-full-hovered--light));
            transition: color 0.2s ease-out;
        }
    }

    @media @screen-md {
        position: relative;
        top: auto;
        right: auto;
        margin-left: var(--margin--sm);
    }
}

.systemMessage__proformaInvoice {
    transform: translateZ(0);
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--gap--4xl);

    @media @screen-md {
        margin-right: var(--margin--xl);
    }
}

.proformaInvoice__headline {
    flex-basis: 100%;
}

.proformaInvoice__note {
    flex-basis: 100%;
    color: rgb(var(--foreground--neutral-high-default--light));
}

/* another feedback messages solution that is populated by calling $.notifier (see jquery.notifier.js) */

/* Also used by Notification react component (legacy class-driven) */
.systemMessage__notification > ul {
    margin: 0;
    padding: 0;

    > li {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
}

.systemMessage__notification,
.js-notifier.systemMessage {
    position: fixed;
    z-index: var(--elevation--modal);
    right: var(--offset--md);
    bottom: var(--offset--xl);
    left: var(--offset--md);

    max-width: 1150px;
    margin: 0 auto;
}

.systemMessage__notification--right,
.js-notifier.systemMessage {
    @media @screen-xl {
        right: var(--offset--lg);
        left: calc(250px + var(--offset--lg)); // sidebar and padding
    }

    @media @screen-xxl {
        right: var(--offset--xl);
        left: calc(250px + var(--offset--xl)); // sidebar and padding
    }
}