// RIVER Design-System: Preload - Styles / Notifications //

// Define our notification styles here.
// These are used for common notifications: success, info, warning, error.
// Apply the class .style-notification for the base layout.

@if(design-setting('helpers') and design-setting('helpers.styles-notifications', false)) {
    /* RIVER Design-System: Helpers - Styles / Formats */

    .style-notification {
        display: block;
        padding: 1rem 2rem;
        border: v('common.borders.normal', solid 2px slategray);
    }

    .style-notification--text {
        color: v('colors.gray.normal', slategray);
        background-color: v('colors.gray.bg', ghostwhite);
        border-color: v('colors.gray.border', slategray);
    }

    .style-notification--success {
        color: design-variable('notifications.success.text', #5DA176);
        background-color: design-variable('notifications.success.bg', #DEF8E7);
        border-color: design-variable('notifications.success.border', #57BC8A);
    }
    .style-notification--success :is(a, h1, h2, h3, h4, h5, h6) {
        color: design-variable('notifications.success.text', #5DA176);
    }

    .style-notification--info {
        color: design-variable('notifications.info.text', #3A61D8);
        background-color: design-variable('notifications.info.bg', #E1E7FE);
        border-color: design-variable('notifications.info.border', #4B72E6);
    }
    .style-notification--info :is(a, h1, h2, h3, h4, h5, h6) {
        color: design-variable('notifications.info.text', #3A61D8);
    }

    .style-notification--warning {
        color: design-variable('notifications.warning.text', #D1903C);
        background-color: design-variable('notifications.warning.bg', #F8F0E4);
        border-color: design-variable('notifications.warning.border', #E8B44E);
    }
    .style-notification--warning :is(a, h1, h2, h3, h4, h5, h6) {
        color: design-variable('notifications.warning.text', #D1903C);
    }

    .style-notification--error {
        color: design-variable('notifications.error.text', #CC2A2B);
        background-color: design-variable('notifications.error.bg', #FBE1E1);
        border-color: design-variable('notifications.error.border', #DC4B4A);
    }
    .style-notification--error :is(a, h1, h2, h3, h4, h5, h6) {
        color: design-variable('notifications.error.text', #CC2A2B);
    }

}