/* ============================================================================
   06-COMPONENTS -> #NOTIFICATIONS
   ========================================================================= */

/**
 * A fixed container that displays alerts caused by user interaction.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Notifications
 */

.notifications  {
    bottom: 0; 
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    position: fixed;
    right: 0; 
    width: 100%; 
    z-index: var(--z-index-50);

    @include media-breakpoint-up('md') {
        max-width: 25rem;
    }
}