/*

In this file:

// A. Variables
// B. Component

*/

//////////////////////////////////////////////
// A. Variables
//////////////////////////////////////////////

:root {
    --alert-padding-x: var(--spacer-2);

    --alert-padding-y: var(--spacer-2);

    --alert-max-width: calc(var(--wide-width) - (var(--container-padding-x) * 2));
}

//////////////////////////////////////////////
// B. Component
//////////////////////////////////////////////

@layer component {

    // Alert Block

    .alert {
        --icon-size: 1em;

        display: grid;

        padding: var(--alert-padding-y) var(--alert-padding-x);

        > * {
            width: 100%;
            max-width: var(--alert-max-width);
            margin-inline: auto;
        }
        
        &:has(> [class*="__description"]) {
            row-gap: calc(var(--alert-padding-y) / 2);
        }

        &:not(
            [class*="theme-"],
            [class*="--inverse"],
            [class*="background-"]
        ) {
            background-color: var(--subtle-fill-2);
        }    

        &[class*="border"] {
            border-color: currentColor !important;
        }

        a {
            color: currentColor !important;
        }
    }

    // Alert Elements

    .alert__title {
        display: flex;
        align-items: center;

        &.text-align-center,
        .text-align-center & {
            justify-content: center;
        }

        &.text-align-right,
        .text-align-right & {
            justify-content: flex-end;
        }

        &:has(> [class*="icon"]){
            gap: 0.5em;
        }
    }

    .alert__title__text {
        font-weight: var(--font-weight-bold);
    }

    // Button as direct child — dismissable layout

    .alert:has([data-alert-close]) {
        grid-template-columns: 1fr auto;
        align-items: baseline;
        grid-template-areas:
            "title close"
            "description description";

        > [data-alert-close] {
            grid-area: close;
            font-size: var(--font-size-sm);
        }

        > [class*="__title"] {
            grid-area: title;
            margin-block: auto;
        }

        > [class*="__description"] {
            grid-area: description;
        }
    }

    // Icon indent — description aligns with title text when alert is wide enough

    .alert:has(.alert__title > [class*="icon"]) {
        container-type: inline-size;

        @container (min-width: 25rem) {
            .alert__description {
                padding-inline-start: calc(var(--icon-size) + var(--alert-padding-y));
            }
        }
    }

    .alert__description {
        p:not(:last-child) {
            margin-block-end: 0.5em;
        }
    }

    // Dismissed (added by JavaScript)

    .dismissed {
        animation-duration: 0.5s;
        animation-name: fadeOut;

        @media (prefers-reduced-motion: reduce) {
            animation: none;
        }
    }

    @keyframes fadeOut {
        from { opacity: 1; }
        to   { opacity: 0; }
    }

} // end @layer