.auth0-notification,
.auth0-notification-global
	background: white
	margin-bottom: 25px
	overflow: hidden
	position: relative
	
	.notification-icon
		line-height: 1
		font-size: 18px

		+breakpoint("tablet", "max")
			margin-bottom: 14px

		+breakpoint("tablet", "min")
			margin-right: 25px

	.btn
		flex-shrink: 0

		+breakpoint("tablet", "min")
			margin-left: 25px
	
	p
		margin: 0
		flex-grow: 1

		+breakpoint("tablet", "max")
			margin-bottom: 14px;
			text-align: center;
	
	&.primary .notification-icon
		color: #44C7F4

	&.danger .notification-icon
		color: #F8D01C
		
	&.warning .notification-icon
		color: #F5871E
	
	.close
		color: #ddd
		font-size: 14px;
		opacity: 1
		margin-left: 25px;

		+breakpoint("tablet", "max")
			position: absolute;
			top: 15px;
			right: 15px;
			margin-left: 0;

.auth0-notification
	padding: 25px 20px
	box-shadow 0 2px 4px rgba(0,0,0,.11)
	display: flex
	align-items: center

	+breakpoint("tablet", "max")
		flex-direction: column;

.auth0-notification-global
	background: transparent
	border-bottom: 1px solid #E6E7E8
	padding: 0
	
	.container
		padding: 25px 20px
		width: 100%
		display: flex
		align-items: center

		+breakpoint("tablet", "max")
			flex-direction: column;