.alerts-container {
    --color-alert-container-background: var(--color-primary-black);
    --color-alert-color: var(--color-primary-white);
    --color-alert-background-info: var(--color-apex42-rose-a11y);
    --color-alert-icon-info: var(--color-primary-white);
    --color-link-normal: var(--color-alert-color);
    --color-link-hover: var(--color-alert-color);
    --color-link-visited: var(--color-alert-color);
    /* These colors have not specifically been styled yet */
    --color-alert-background-warning: #ff03;
    --color-alert-icon-warning: #ff08;
    --color-alert-background-critical: #f003;
    --color-alert-icon-critical: #f008;
}

.alerts-container {
    width: 100%;
    display: grid;
    row-gap: 0.5rem;
    background-color: var(--color-alert-container-background);
    color: var(--color-alert-color);

    :where(.single-alert) {
        display: grid;
        grid-template-columns: 10rem 1fr 10rem;
        background-color: var(--local-alert-background-color);
        column-gap: 3rem;
        padding: 1rem;
        align-items: center;

        &:where(.single-alert.hidden) {
            display: none;
        }

        &:where(.hide) {
            animation: alert-close 0.25s forwards;
        }

        &:where(.info) {
            --local-alert-background-color: var(--color-alert-background-info);
            --local-alert-icon-color: var(--color-alert-icon-info);
        }

        &:where(.warning) {
            --local-alert-background-color: var(--color-alert-background-warning);
            --local-alert-icon-color: var(--color-alert-icon-warning);
        }

        &:where(.critical) {
            --local-alert-background-color: var(--color-alert-background-critical);
            --local-alert-icon-color: var(--color-alert-icon-critical);
        }

        :where(svg) {
            max-height: 2rem;
            max-width: 2rem;
            width: 100%;
        }

        & :where(.dismiss-alert svg) {
            max-width: 1.5rem;
            cursor: pointer;
        }

        :where(.alert-copy) {
            color: var(--color-link-normal);
            line-height: 1.2;
            font-size: 2rem;

            :where(a) {
                color: var(--color-link-normal);
                text-decoration: underline;

                &:where(:visited) {
                    color: var(--color-link-visited);
                }

                &:where(:hover) {
                    color: var(--color-link-hover);
                }
            }
        }

        :where(.alert-icon) {
            justify-self: end;
            display: flex;

            :where(.alert-icon svg) {
                color: var(--local-alert-icon-color);
            }
        }

        :where(.alert-headline) {
            font-size: 2.4rem;
            font-weight: 700;
            line-height: 1;
        }

        :where(.alert-copy, .alert-cta) {
            display: inline;
        }

        @media screen and (max-width: 75em) {
            & {
                grid-template-columns: 5rem 1fr 5rem;
            }
        }
    }
}

@keyframes alert-close {
    100% {
        opacity: 0;
        display: none;
    }
}