/*
	NG CMS admin notifications (stickers/toasts)
	Styles for ngNotifySticker container and items
*/

#ngSticker {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    /* allow clicks through gaps */
}

#ngSticker .ngStickerClass {
    position: relative;
    box-sizing: border-box;
    display: block;
    min-width: 280px;
    max-width: 420px;
    margin: 10px;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: #2b2b2b;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
    font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    pointer-events: auto;
    /* clickable close button */
}

/* Classic appearance fallback class */
.ngStickerClassClassic {
    background: #fff;
}

/* Close button */
#ngSticker .ngStickerClass .ngStickerClassExitBTN {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.06);
    cursor: pointer;
}

#ngSticker .ngStickerClass .ngStickerClassExitBTN:before,
#ngSticker .ngStickerClass .ngStickerClassExitBTN:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: rgba(0, 0, 0, 0.6);
}

#ngSticker .ngStickerClass .ngStickerClassExitBTN:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#ngSticker .ngStickerClass .ngStickerClassExitBTN:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Status variants via className option */
.alert-success {
    background: #eafaf1;
    color: #1e6b3a;
    border-color: #c9efdb;
}

.alert-danger {
    background: #fdecea;
    color: #611a15;
    border-color: #f5c6cb;
}

.alert-warning {
    background: #fff4e5;
    color: #663c00;
    border-color: #ffe1b3;
}

.alert-info {
    background: #e8f4fd;
    color: #0b4f71;
    border-color: #cbe5fb;
}

/* Optional: animate in/out via jQuery .fadeIn/.fadeOut in admin.js */
@media (max-width: 576px) {
    #ngSticker .ngStickerClass {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        margin: 10px;
    }
}
