notification(class="type-{opts.notification.type}")
	.contents
		.header
			button.close: i.fa.fa-times
			i.icon.fa(class="fa-{opts.notification.icon}")
			| { opts.notification.title }
			
		.message(if="{opts.notification.message != null}") { opts.notification.message }
	
	style(type="scss").
		:scope {
			display: block;
			text-align: right;
			
			.close {
				display: none; // FIXME
				float: right;
				background: none;
				border: 0;
				padding: 1px 3px;
				font-size: 12px;
				color: rgb(190, 190, 190);
				border: 1px solid rgb(190, 190, 190);
				border-radius: 4px;
				
				&:hover {
					color: white;
					border-color: white;
				}
			}
			
			.contents {
				text-align: left;
				display: inline-block;
				border-radius: 6px;
				margin-right: 19px;
				margin-top: 10px;
				padding: 9px 14px;
				color: white;
				font-size: 15px;
				filter: alpha(opacity=85);
				opacity: 0.85;
				width: auto;
				background-color: black;
				
				.header {
					margin-right: 6px;
					font-weight: bold;
					
					.icon {
						font-size: 19px;
						margin-right: 9px !important;
					}
				}
				
				.message {
					margin-top: 8px;
				}
			}
			
			&.type-error {
				.contents {
					background-color: #371B1B;
					
					.header .icon {
						color: #FFD2D2;
					}
				}
			}
			
			&.type-info {
				.contents {
					background-color: #2D2D2D;
					
					.header .icon {
						color: #CBCAFF;
					}
				}
			}
		}
		
		/* From old code, but purpose unclear:
		.notification-popup ul, .error-popup ul
		{
			margin: 4px 0px;
			padding-left: 48px;
		}
		*/