/**
 * Notices Component Styles
 *
 * This file contains all styles for error and info notice alerts.
 */

@layer components.notices {
    /* ========================================
       Base Notice Styles
       ======================================== */
    .errorNotice,
    .infoNotice {
        padding: var(--space-3);
        margin-block-start: var(--space-6);
        color: var(--color-text-bright);
        border-radius: var(--radius-sm);
    }

    /* ========================================
       Error Notice
       ======================================== */
    .errorNotice {
        border: var(--border-width) solid var(--color-error);
        background-color: var(--color-error-bg);
    }

    /* ========================================
       Info Notice
       ======================================== */
    .infoNotice {
        border: var(--border-width) solid var(--color-info);
        background-color: var(--color-info-bg);
    }
}