/////////////////////////////////////////////
/////////////////////////////////////////////
//        ______ _           _             //
//       |  ___| |         | |     		     //
//       | |_  | | __ _ ___| |__    	     //
//       |  _| | |/ _` / __| '_ \          //
//       | |   | | (_| \__ \ | | |         //
//       \_|   |_|\__,_|___/_| |_|         //
//                                         //
/////////////////////////////////////////////
/////////////////////////////////////////////

// In the new Rails, this will come through
// as a real-time notification.

/////////////////////////////////////////////
/////////////////////////////////////////////

// Flash
flash#flash
	$padding: 0.5em

	// http://stackoverflow.com/a/485887/1143732 (for sizing with margin)
	position:     fixed
	top: 				  2em
	left: 				0
	right: 				0
	margin: 			0 1em
	z:
		index: 			10000

	// Message
	> message
		display: 			block
		padding:			($padding + 0.1em) $padding $padding 0
		margin: 			0 auto 0.5em
		color: 				rgba(255,255,255,1)
		background-color: 	rgba(0,0,0,1)
		border: 			1px solid rgba(0,0,0,0.85)
		transition: 	background ($animation-duration * 0.65) ease-in-out, opacity ($animation-duration * 0.85) ease-in-out
		font:
			size: 			0.85em
			weight: 		bold
		text:
			align: 			center
			shadow: 		1px 1px 0 rgba(0,0,0,1)
			transform: 		capitalize
		border:
			radius: 		3px
		box:
			sizing: 		border-box
			shadow:			0 1px 1px 0 rgba(0,0,0,0.35)
		animation:
			delay: 0.5s

		&:after
			content: 	  ""
			display: 	  block
			position: 	absolute
			width: 		  100%
			height: 	  1px
			top: 		    0
			left: 		  0
			background: rgba(255,255,255,0.145)
			transition: background ($animation-duration * 0.65) ease-in-out

		//

		&:hover
			cursor: 		  	  pointer
			background-color: rgba(0,0,0,0.5)
			&:after
				background: 	  rgba(255,255,255,0.18)

		&:active
			background-color: rgba(0,0,0,0.75)
			&:after
				background: 	  rgba(255,255,255,0.16)

		////

		// Styling
		$options: (notice: rgba(#FF002F,1), error: rgba(184,11,14,1), alert: rgba(11,83,184,1))
		@each $option, $color in $options
			@if map-has-key($options, $option)
				&.#{$option}
					background: linear-gradient(bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%)
					background:
						color: $color

					&:hover
						background:
							color: darken($color, 5%)

					&:active
						background:
							color: darken($color, 7%)
			@else
				@warn "Unfortunately, no value could be retrieved from `#{$option}`. "

		////

		i
			position:  absolute
			left: 	   0
			top: 	   0
			height:    100%
			border:
				right: 1px solid rgba(0,0,0,0.15)

			&:before
				display: block
				padding: ($padding + 0.15em) 0 $padding
				margin: 0 ($padding + 0.15em) 0 ($padding + 0.25em)

			&:after
				content: 	""
				display: 	block
				position: 	absolute
				top: 		0
				right: 		-2px
				width: 		1px
				height: 	100%
				background: rgba(255,255,255,0.1)


/////////////////////////////////////////////
/////////////////////////////////////////////