// Name:            Notification
// Description:     Component to create notification messages
//
// Component:       `ui-notification`
//
// Sub-objects:     `ui-notification-message`
//
// Adopted:         `ui-notification-close`
//
// Modifiers:       `ui-notification-top-center`
//                  `ui-notification-top-right`
//                  `ui-notification-bottom-left`
//                  `ui-notification-bottom-center`
//                  `ui-notification-bottom-right`
//                  `ui-notification-message-primary`
//                  `ui-notification-message-success`
//                  `ui-notification-message-warning`
//                  `ui-notification-message-danger`
//
// ========================================================================


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

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

@notification-message-margin-top:                     10px;
@notification-message-padding:                        @global-small-gutter;
@notification-message-background:                     @global-muted-background;
@notification-message-color:                          @global-color;
@notification-message-font-size:                      @global-medium-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: Notification
 ========================================================================== */

/*
 * 1. Set position
 * 2. Dimensions
 */

.ui-notification {
  /* 1 */
  position: fixed;
  top: @notification-position;
  left: @notification-position;
  z-index: @notification-z-index;
  /* 2 */
  box-sizing: border-box;
  width: @notification-width;
  .hook-notification;
}


/* Position modifiers
========================================================================== */

.ui-notification-top-right,
.ui-notification-bottom-right {
  left: auto;
  right: @notification-position;
}

.ui-notification-top-center,
.ui-notification-bottom-center {
  left: 50%;
  margin-left: (@notification-width / -2);
}

.ui-notification-bottom-left,
.ui-notification-bottom-right,
.ui-notification-bottom-center {
  top: auto;
  bottom: @notification-position;
}


/* Responsiveness
========================================================================== */

/* Phones portrait and smaller */
@media (max-width: @breakpoint-xsmall-max) {

  .ui-notification {
    left: @notification-position;
    right: @notification-position;
    width: auto;
    margin: 0;
  }

}


/* Message
========================================================================== */

.ui-notification-message {
  position: relative;
  padding: @notification-message-padding;
  background: @notification-message-background;
  color: @notification-message-color;
  font-size: @notification-message-font-size;
  line-height: @notification-message-line-height;
  cursor: pointer;
  .hook-notification-message;
}

* + .ui-notification-message { margin-top: @notification-message-margin-top; }


/* Close
 * Adopts `ui-close`
 ========================================================================== */

.ui-notification-close {
  display: none;
  position: absolute;
  top: @notification-close-top;
  right: @notification-close-right;
  .hook-notification-close;
}

.ui-notification-message:hover .ui-notification-close { display: block; }


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

/*
 * Primary
 */

.ui-notification-message-primary {
  color: @notification-message-primary-color;
  .hook-notification-message-primary;
}

/*
 * Success
 */

.ui-notification-message-success {
  color: @notification-message-success-color;
  .hook-notification-message-success;
}

/*
 * Warning
 */

.ui-notification-message-warning {
  color: @notification-message-warning-color;
  .hook-notification-message-warning;
}

/*
 * Danger
 */

.ui-notification-message-danger {
  color: @notification-message-danger-color;
  .hook-notification-message-danger;
}


// Hooks
// ========================================================================

.hook-notification-misc;

.hook-notification() {}
.hook-notification-message() {}
.hook-notification-close() {}
.hook-notification-message-primary() {}
.hook-notification-message-success() {}
.hook-notification-message-warning() {}
.hook-notification-message-danger() {}
.hook-notification-misc() {}