// Name:            Notify
// Description:     Defines styles for toggleable notifications
//
// Component:       `uk-notify`
//
// Sub-objects:     `uk-notify-message`
//
// Modifiers:       `uk-notify-top-center`
//                  `uk-notify-top-right`
//                  `uk-notify-bottom-left`
//                  `uk-notify-bottom-center`
//                  `uk-notify-bottom-right`
//                  `uk-notify-message-primary`
//                  `uk-notify-message-success`
//                  `uk-notify-message-warning`
//                  `uk-notify-message-danger`
//
// Uses:            Close: `uk-close`
//
// ========================================================================


/* ========================================================================
   Component: Notify
 ========================================================================== */

/*
 * Message container for positioning
 */

.uk-notify {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1040;
    box-sizing: border-box;
    width: 350px;
    @include hook-notify();
}


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

.uk-notify-top-right,
.uk-notify-bottom-right  {
    left: auto;
    right: 10px;
}

.uk-notify-top-center,
.uk-notify-bottom-center {
    left: 50%;
    margin-left: (350px / -2);
}

.uk-notify-bottom-left,
.uk-notify-bottom-right,
.uk-notify-bottom-center {
    top: auto;
    bottom: 10px;
}


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

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

    /*
     * Fit in small screen
     */

    .uk-notify {
        left: 10px;
        right: 10px;
        width: auto;
        margin: 0;
    }

}


/* Sub-object: `uk-notify-message`
========================================================================== */

.uk-notify-message {
    position: relative;
    margin-bottom: 10px;
    padding: 15px;
    background: #444;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
    text-align: center;
    @include hook-notify-message();
}


/* Close in notify
 ========================================================================== */

.uk-notify-message > .uk-close {
    visibility: hidden;
    float: right;
}

.uk-notify-message:hover > .uk-close { visibility: visible; }


/* Modifier: `uk-alert-info`
 ========================================================================== */

.uk-notify-message-primary {
    background: #ebf7fd !important;
    color: #2d7091;
    @include hook-notify-message-primary();
}


/* Modifier: `uk-alert-success`
 ========================================================================== */

.uk-notify-message-success {
    background: #f2fae3 !important;
    color: #659f13;
    @include hook-notify-message-success();
}


/* Modifier: `uk-notify-message-warning`
 ========================================================================== */

.uk-notify-message-warning {
    background: #fffceb !important;
    color: #e28327;
    @include hook-notify-message-warning();
}


/* Modifier: `uk-notify-message-danger`
 ========================================================================== */

.uk-notify-message-danger {
    background: #fff1f0 !important;
    color: #d85030;
    @include hook-notify-message-danger();
}


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

@include hook-notify-misc();

// @mixin hook-notify(){}
// @mixin hook-notify-message(){}
// @mixin hook-notify-message-primary(){}
// @mixin hook-notify-message-success(){}
// @mixin hook-notify-message-warning(){}
// @mixin hook-notify-message-danger(){}
// @mixin hook-notify-misc(){}