// General Notice/Notification styles

.NoticeMessage {
	color: $highlight-color;
	background: $highlight-bg;

	i.fa {
		color: $highlight-color;
	}

	&.open, &:hover {
		color: $highlight-color;
		background: darken($highlight-bg, 3%);
	}

	a {
		color: $no-message-link-color;
		&:hover {
			color: $no-message-link-hover-color;
		}
	}
}

.NoticeWarning {
	color: $no-warning-color;
	background: $no-warning-bg;

	i.fa {
		color: $no-warning-icon-color;
	}

	&.open, &:hover {
		color: $no-warning-open-color;
		background: $no-warning-open-bg;
	}

	a {
		color: $no-warning-link-color;
		&:hover {
			color: $no-warning-link-hover-color;
		}
	}
}

.NoticeError {
	color: $no-error-color;
	background: $no-error-bg;

	i.fa {
		color: $no-error-icon-color;
	}

	&.open, &:hover {
		color: $no-error-open-color;
		background: $no-error-open-bg;
	}

	a {
		color: $no-error-link-color;
		&:hover {
			color: $no-error-link-hover-color; 	
		}
	}
}

// Specific to #NotificationList
#NotificationList {
	.NoticeMessage,
	.NoticeError,
	.NoticeWarning {
		padding: 0.25em 0;
		border: none;
		border-bottom: 1px solid $no-border-color;
	}
	.pw-container {
		margin-left: 0.5em;
		margin-right: 1em;
		max-width: 100%; 
	}
	a {
		text-decoration: underline;
	}

	.NoticeMessage {
		color: $no-message-color;
		background: $no-message-bg;

		i.fa {
			color: $no-message-color;
		}

		&.open, &:hover {
			color: $no-message-open-color;
			background: $no-message-open-bg;
		}

		a {
			color: $no-message-link-color;
			&:hover {
				color: $no-message-link-hover-color;
			}
		}
	}
}





#NotificationList .NotificationHasProgress {
	background: $link;
	color: $white;

	.NotificationProgress {
		background: darken($link, 15%); 
	}
	i.fa {
		color: $white;
	}
	a, a:hover {
		color: $white;
	}
}

// Specific to #NotificationBug
#NotificationBug {
	top: 1.7em;
	font-size: 11px;
	font-weight: normal;
	background: $no-bug-bg;
	color: $no-bug-color;
	border-radius: 3px;
	padding: 0;
	height: auto !important;
	min-width: 0 !important;
	border-top: none;
	transition: left $speed ease-in-out;

	&:before{
		content: "\f0a2";
		font-family: fontAwesome;
		left: -20px;
		position: absolute;
		color: $topnav-link-color;
		font-size: 14px;
	}
	
	& .qty{
		font-size: 12px !important;
		font-weight: bold !important;
		width: auto !important;
		padding: 2px 6px 2px 5px;
	}

	&:hover {
		color: $no-bug-hover-color;
		background: $no-bug-hover-bg;
	}

	&.open {
		color: $no-bug-open-color;
		background: $no-bug-open-bg;

		&:hover {
			color: $no-bug-open-hover-color;
			background: $no-bug-open-hover-bg;
		}
	}

	&.NoticeWarning {
		color: $no-warning-color;
		background: $no-warning-bg;
	}

	&.NoticeError {
		color: $no-error-color;
		background: $no-error-bg;
	}
}

// Specific to #NotificationGhosts
#NotificationGhosts {
	top: 55px !important;

	li {
		.NotificationGhost{
			box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
		}
		.NoticeMessage {
			color: $no-ghost-message-color;
			background: $no-ghost-message-bg;

			i.fa {
				color: $no-ghost-message-icon-color;
			}
		}
		.NoticeWarning {
			color: $no-ghost-warning-color;
			background: $no-ghost-warning-bg;

			i.fa {
				color: $no-ghost-warning-icon-color;
			}
		}
		.NoticeError {
			color: $no-ghost-error-color;
			background: $no-ghost-error-bg;

			i.fa {
				color: $no-ghost-error-icon-color;
			}
		}
	}
}

.NotificationRemove{
	right: 2em !important;
}


/**
 * Specific to notices when SystemNotifications is not installed
 *
 */

#notices {
	position: relative;
	// z-index: 5; 
	border-top: $notices-border-top;
	border-bottom: $notices-border-bottom;

	li {
		padding: 0.6em 1.5em;
	}
	
	li > .fa {
		margin-right: 0.25em;
		
	}
	
	/*
	li.NoticeError + li.NoticeError,
	li.NoticeWarning + li.NoticeWarning,
	li.NoticeMessage + li.NoticeMessage {
		padding-top: 0 !important;
	}
	*/

}

#notices li .notice-remove {
	float: right;
	color: $highlight-color;
	text-decoration: none;
	padding: 0 0.5em 0 1em;
	
	.fa {
		margin-right: 0;	
	}
}