/* Avis — modèle canonique ; son emploi : canon_notice.md. */

@layer components {
    .notice {
        display: flex;
        flex-direction: column;
        gap: var(--canon-space-1);
        padding: var(--canon-space-3) var(--canon-space-4);
    }

    .notice {
        border: var(--canon-line-width) solid var(--notice-color, var(--canon-theme-neutral));
        border-radius: var(--canon-radius-control);
        background-color: var(--notice-surface, var(--canon-theme-neutral-surface));
    }

    .notice {
        font-size: var(--canon-size-control);
        color: var(--canon-theme-ink);
    }
    .notice-title {
        font-weight: var(--canon-weight-label);
        color: var(--notice-color, var(--canon-theme-neutral));
    }
}

@layer components {
    .notice--position-floating {
        position: fixed;
        inset-block-end: var(--canon-space-edge);
        inset-inline-end: var(--canon-space-edge);
        z-index: var(--canon-plane-notice);
        max-width: calc(100% - 2 * var(--canon-space-edge));
    }

    .notice--position-floating {
        border-color: transparent;
        background-color: var(--notice-color, var(--canon-theme-neutral));
        box-shadow: var(--canon-shadow-overlay, none);
    }

    .notice--position-floating,
    .notice--position-floating .notice-title {
        color: var(--canon-theme-on-action);
    }
}

@layer components {
    .notice--color-danger {
        --notice-color: var(--canon-theme-danger);
        --notice-surface: var(--canon-theme-danger-surface);
    }
    .notice--color-warning {
        --notice-color: var(--canon-theme-warning);
        --notice-surface: var(--canon-theme-warning-surface);
    }
    .notice--color-success {
        --notice-color: var(--canon-theme-success);
        --notice-surface: var(--canon-theme-success-surface);
    }
    .notice--color-info {
        --notice-color: var(--canon-theme-info);
        --notice-surface: var(--canon-theme-info-surface);
    }
    .notice--color-neutral {
        --notice-color: var(--canon-theme-neutral);
        --notice-surface: var(--canon-theme-neutral-surface);
    }
}