$color-text-notification: white

.toast-title
	font-weight: bold

.toast-message
	word-wrap: break-word

	a,
	label
		color: rgba($color-text-notification, .8)

		a:hover
			color: $color-text-notification
			text-decoration: none

	button
		border-color: white
		color: white
		display: inline-block
		margin: auto 15px

	small
		font-size: .9em
		opacity: .9

.toast-close-button
	position: relative
	right: -0.3em
	top: -0.3em
	float: right
	font-size: 20px
	font-weight: bold
	color: $color-text-notification
	-webkit-text-shadow: 0 1px 0 rgba(255,255,255,1)
	text-shadow: 0 1px 0 rgba(255,255,255,1)
	opacity: .8
	line-height: 1

	&:hover,
	&:focus
		color: $color-text-notification
		text-decoration: none
		cursor: pointer
		opacity: .4

.rtl .toast-close-button
	left: -0.3em
	float: left
	right: 0.3em

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button
	padding: 0
	cursor: pointer
	background: transparent
	border: 0
	-webkit-appearance: none

//#endregion

.toast-top-center
	top: 0
	right: 0
	width: 100%

.toast-bottom-center
	bottom: 0
	right: 0
	width: 100%

.toast-top-full-width
	top: 0
	right: 0
	width: 100%

.toast-bottom-full-width
	bottom: 0
	right: 0
	width: 100%

.toast-top-left
	top: 12px
	left: 12px

.toast-top-right
	top: 12px
	right: 12px

.toast-bottom-right
	right: 12px
	bottom: 12px

.toast-bottom-left
	bottom: 12px
	left: 12px

#toast-container
	position: fixed
	z-index: 999999
	// The container should not be clickable.
	pointer-events: none
	*
		-moz-box-sizing: border-box
		-webkit-box-sizing: border-box
		box-sizing: border-box


	> div
		position: relative
		// The toast itself should be clickable.
		pointer-events: auto
		overflow: hidden
		margin: 0 0 6px
		padding: 8px 25px 12px 40px
		max-width: 350px
		border-radius: 3px
		background-position: 15px center
		background-repeat: no-repeat
		box-shadow: 1px 1px 0 rgba(black, .2)
		color: $color-text-notification

		&:before
			position: absolute
			top: 10px
			left: 15px
			font-family: 'pillar-font'

	> div.rtl
		direction: rtl
		padding: 10px 40px 10px 10px
		background-position: right 15px center

	> div:hover
		box-shadow: 1px 1px 0 rgba(black, .2)
		cursor: pointer

	> .toast-info:before
		content: '\e84c'

	> .toast-error:before
		content: '\e850'

	> .toast-success:before
		content: '\e84a'

	> .toast-warning:before
		content: '\e868'

	/*overrides*/
	&.toast-top-center > div,
	&.toast-bottom-center > div
		width: 300px
		margin-left: auto
		margin-right: auto

	&.toast-top-full-width > div,
	&.toast-bottom-full-width > div
		width: 96%
		margin-left: auto
		margin-right: auto


.toast
	background-color: $color-text-dark-primary

.toast-success
	background-color: $color-success

.toast-error
	background-color: $color-danger

.toast-info
	background-color: $color-info

.toast-warning
	background-color: darken($color-warning, 10%)

.toast-progress
	position: absolute
	left: 0
	bottom: 0
	height: 4px
	background-color: $color-text
	opacity: .4

/*Responsive Design*/

@media all and (max-width: 240px)
	#toast-container

		> div
			padding: 8px 8px 8px 50px
			width: 11em

		> div.rtl
			padding: 8px 50px 8px 8px

		& .toast-close-button
			right: -0.2em
			top: -0.2em

		& .rtl .toast-close-button
			left: -0.2em
			right: 0.2em


@media all and (min-width: 241px) and (max-width: 480px)
	#toast-container
		> div
			padding: 8px 8px 8px 50px
			width: 18em

		> div.rtl
			padding: 8px 50px 8px 8px

		& .toast-close-button
			right: -0.2em
			top: -0.2em

		& .rtl .toast-close-button
			left: -0.2em
			right: 0.2em


@media all and (min-width: 481px) and (max-width: 768px)
	#toast-container
		> div
			padding: 15px 15px 15px 50px
			width: 25em

		> div.rtl
			padding: 15px 50px 15px 15px