// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,600,300);

:root {
	--color-info         : #34b5f0;
	--color-success      : #31e284;
	--color-warning      : #f0a834;
	--color-danger       : #ff3f3f;
	--color-notification : white;
	--color-dark         : #131821;
}

html { font-size : 62.5%; }
body { font-size : 1.6rem; }

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: var( --color-dark );
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.notification {
	$this : &;
	// Variables
	--padding : 3rem 4rem 1rem 4rem;
	--color   : var( --color-info );
	--bezier  : cubic-bezier( .75,.21,.25,.78 );
	
	position         : relative;
	text-align       : center;
	width  					 : 30rem;
	background-color : var( --color-notification );
	box-shadow       : 0px 10px 10px black;
	border-radius    : 5px;
	
	// Transition
	transition : transform .5s ease .4s;
	
	// Tranform
	transform-origin : 50% 0%;
	transform        : scaleY( 0 );
	
	// Notification styles
	&.-danger  { --color : var( --color-danger );  }
	&.-info    { --color : var( --color-info );    }
	&.-success { --color : var( --color-success ); }
	&.-warning { --color : var( --color-warning ); }
	
	// Actions
	&.-open {
		transition : all .5s ease;
		transform-origin : 50% 50%;
		transform : scale( 1 );
		
		&::before {
			transition : all .4s var( --bezier ) .4s;
			transform : scaleY( 0 );
		}
		
		#{$this}__button {
			color : #fff;
			transition  : color .3s ease .8s, background-color .3s ease;
		}
	}
	
	// Overlay
	&::before {
		content : "";
		
		position : absolute;
		top      : 0;
		left     : 0;
		
		width    : 100%;
		height   : 100%;
		z-index  : 1;
		
		transform-origin : 0% 100%;
		transition : all .5s var( --bezier );
		background : var( --color );
		border-radius : 5px;
	}
	
	&__content {
		box-sizing : border-box;
		padding : var( --padding );
		width   : 100%;
		margin  : 0 auto;
	}
	
	&__icon {
		font-size : 5.2rem;
		color     : var( --color );
		margin-bottom : 2rem;
		transition : color .3s ease;
	}
	
	&__title, &__text, &__icon {
		margin-top : 0;
	}
	
	&__title {
		font-weight : 600;
		margin-bottom : 1rem;
	}
	
	&__text {
		color : var( --color-dark );
		font-size : 1.4rem;
	}
	
	&__button {
		background  : var( --color );
		color       : var( --color );
		width       : 100%;
		border      : none;
		padding     : 1.4rem 2rem;
		font-size   : 1.4rem;
		font-weight : 600;
		transition  : color .3s ease, background-color .3s ease;
		cursor      : pointer;
		outline     : none;
		position    : relative;
		top         : 1px;
		
		border-bottom-left-radius  : 5px;
		border-bottom-right-radius : 5px;
	}
}

.colors {
	position  : absolute;
	bottom    : 1rem;
	left      : 0;
	width     : 100%;
	
	display         : flex;
	align-items     : center;
	justify-content : center;
	flex-flow       : row nowrap;
	
	a {
		--color : var( --color-danger );
		
		width   : 1.6rem;
		height  : 1.6rem;
		display : block;
		margin  : .5rem;
		
		background    : var( --color );
		border-radius : 50%;
		transition    : box-shadow .3s ease;
		
		&[data-status="-warning"] { 
			--color : var( --color-warning );
		}
	
		&[data-status="-success"] { 
			--color : var( --color-success );
		}
		
		&[data-status="-info"] { 
			--color : var( --color-info );
		}
		
		&.-active {
			box-shadow : 0 0 4px 2px var( --color );
		}
	}
}

// jQuery v3.3.1 is supported
jQuery( function( $ ) {
	// Notification element
	var _notification = $( '.notification' );
	
	// Notification icon
	var _nIcon = $( '.notification__icon' );
	
	// Notification title
	var _nTitle = $( '.notification__title' );
	
	// Notification text
	var _nText = $( '.notification__text' );
	
	// Notification button
	var _button = $( '.notification__button' );
	
	// Statuses
	var _statuses = $( '.colors a' );
	
	// Notification button click
	_button.click( function( event ) {
		event.preventDefault( );
		_notification.removeClass( '-open' );
		autoOpen( );
	})
	
	// On status click
	_statuses.click( function( event ) {
			event.preventDefault( );
			// Get the color
			var _status = $( this ).data( 'status' );
		
			// Check if status found
			if( !_status.length )
					return;
		
			_statuses.removeClass( '-active' );
		
			// Check if open
			var _open = _notification.hasClass( '-open' );
		
			// Remove all classes besides the notification class
		  _notification.attr( 'class', 'notification' + ( _open ? ' -open' : '' ) );
		
			// Add the status
			_notification.addClass( _status );
		
			// Change text
			var _title      = 'Oh snap!';
			var _text       = 'An error has occured while creating an error report.';
			var _buttonText = 'Dismiss';
			var _icon       = 'fas fa-exclamation-circle';
		
			switch( _status ) {
				case '-warning' :
					_title = 'Invalid data provided';
					_text  = 'You have provided invalid data when submitting a form';
					_buttonText = 'Let\'s fix it';
					_icon = 'fas fa-exclamation-triangle';
				break;
				case '-info' :
					_title = 'Hey there!';
					_text  = 'When accessing the hidden data you should enable some options';
					_buttonText = 'Got it!';
					_icon = 'fas fa-info-circle';
				break;
				case '-success' :
					_title = 'Success!';
					_text  = 'Your profile was succesfully updated and new data will appear on your timeline.';
					_buttonText = 'Thank you!';
					_icon = 'far fa-check-circle';
				break;
			}
		
			_nTitle.text( _title );
			_nText.text( _text );
			_button.text( _buttonText );
		
			_nIcon.attr( 'class', 'notification__icon ' + _icon );
		
			$( this ).addClass( '-active' );
	});
	
	// Auto open notification
	function autoOpen( $ms = 2000 ) {
		setTimeout( function( ) {
			_notification.addClass( '-open' );
		}, $ms );
	}
	
	autoOpen( 300 );
});