/* The status line (assets/notice/status_notice.ts). Both regions stay rendered so screen readers
   hear every change; an empty one collapses to nothing (no text, no icon, no padding). */
@layer components {
    .status-notice {
        display: grid;
        font-size: var(--text-s);
        line-height: 1.45;
    }

    .status-notice__line {
        display: flex;
        gap: var(--space-2);
        align-items: flex-start;
        margin: 0;

        &:has(.status-notice__text:empty) {
            display: block;
            block-size: 0;
            overflow: hidden;
        }
    }

    .status-notice__icon {
        display: inline-flex;
        flex: none;
        margin-block-start: 0.1em;

        & svg {
            inline-size: 1.25em;
            block-size: 1.25em;
        }
    }

    .status-notice__line:has(.status-notice__text:empty) .status-notice__icon {
        display: none;
    }

    /* Progress and information: the quiet ink, no icon. */
    .status-notice__line--polite {
        color: var(--color-text-muted);

        & .status-notice__icon--success {
            display: none;
        }
    }

    .status-notice[data-tone='progress'] .status-notice__line--polite {
        font-style: italic;
    }

    /* Done: full ink with the cyan check. */
    .status-notice[data-tone='success'] .status-notice__line--polite {
        color: var(--color-text);

        & .status-notice__icon--success {
            display: inline-flex;
            color: var(--color-accent-700);
        }
    }

    /* Somebody has to act: Broadsheet's loudest ink (deep magenta) on its wash, with the warning icon. */
    .status-notice__line--alert {
        color: var(--danger);
        font-weight: 600;

        &:not(:has(.status-notice__text:empty)) {
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-md);
            background: var(--danger-wash);
        }
    }
}