//
// Component: Notification
//
// ========================================================================


// Variables
// ========================================================================

@notification-position:                               10px;
@notification-z-index:                                @global-z-index + 40;
@notification-width:                                  75%;

@notification-message-margin-top:                     10px;
@notification-message-padding:                        @global-gutter;
@notification-message-background:                     @global-muted-background;
@notification-message-color:                          @global-color;
@notification-message-font-size:                      @global-font-size;
@notification-message-line-height:                    1.4;

@notification-close-top:                              @notification-message-padding + 5px;
@notification-close-right:                            @notification-message-padding;

@notification-message-primary-color:                  @global-primary-background;
@notification-message-success-color:                  @global-success-background;
@notification-message-warning-color:                  @global-warning-background;
@notification-message-danger-color:                   @global-danger-background;


// Component
// ========================================================================

.hook-notification() {
//		box-shadow: 5px 5px 4px 2px black;
		box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
}


// Message
// ========================================================================

.hook-notification-message() {}


// Close
// ========================================================================

.hook-notification-close() {}


// Style modifiers
// ========================================================================

.hook-notification-message-primary() {}

.hook-notification-message-success() {}

.hook-notification-message-warning() {}

.hook-notification-message-danger() {}


// Miscellaneous
// ========================================================================

.hook-notification-misc() {}
