@import "../node_modules/delite/css/includes";

@import "../node_modules/delite/css/mixins";
@max-width: 500px;
.d-toaster-inner {
	.user-select (none);
	.touch-callout (none);
}

// placement
.d-toaster-inner {
	position: fixed;
	.d-toaster-placement-default & {
		left: 20%;
		bottom: 10%;
		width: 60%;
	}
	.d-toaster-placement-tl & {
		left: 0;
		top: 0;
	}
	.d-toaster-placement-tc & {
		left: 20%;
		top: 0;
		width: 60%;
		@media only screen and (max-width: @max-width) {
			left: 0%;
			width: 100%;
		}
	}
	.d-toaster-placement-tr & {
		right: 0;
		top: 0;
	}
	.d-toaster-placement-br & {
		right: 0;
		bottom: 0;
	}
	.d-toaster-placement-bc & {
		left: 20%;
		bottom: 0;
		width: 60%;
		@media only screen and (max-width: @max-width) {
			left: 0%;
			width: 100%;
		}
	}
	.d-toaster-placement-bl & {
		left: 0;
		bottom: 0;
	}
}


// ToasterMessage
button.d-toaster-dismiss::before {
	content: "\00D7";
}

button.d-toaster-dismiss {
	padding: 0;
	cursor: pointer;
	background: 0 0;
	border: 0;
	-webkit-appearance: none;
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 1px 0 #fff;
	opacity: .2;
}

.d-toaster-message {
	position: relative;
	display:block;
}


// animations
.d-toaster-initial {
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: linear;
}

.d-toaster-fadein {
	opacity: 1;
	transition-duration: 700ms
}

.d-toaster-fadeout {
	opacity: 0;
	transition-duration: 1000ms
}

@-webkit-keyframes d-toaster-swipeout {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}

	100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes d-toaster-swipeout {
	0% {
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}

	100% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
		opacity: 0;
	}
}

.d-toaster-swipeout {
	-webkit-animation-name: d-toaster-swipeout;
	animation-name: d-toaster-swipeout;

	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;

	-webkit-animation-duration: 700ms;
	animation-duration: 700ms;

	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.d-toaster-placement- {
	&tl, &tr, &bl, &br {
		.d-toaster-inner {
			width: 23em;
			max-width:100%;
		}
	}
}
.d-toaster-message {
	padding: 1.2em (1.5em + 1em) 1.2em 1.5em;
	border-radius:3px;
	margin:.5em;
	border: 1px transparent solid;
}
.d-toaster-dismiss {
	position: relative;
	top: -5px;
	right: -21px;
}
.d-toaster-message {
	-webkit-touch-callout: none;
	.user-select(none);
}
.d-toaster-type-info {
	background: @state-info-bg;
	border-color: @state-info-border;
	color: @state-info-text;
}
.d-toaster-type-warning {
	background-color: @state-warning-bg;
	border-color: @state-warning-border;
	color: @state-warning-text;
}
.d-toaster-type-success {
	background-color: @state-success-bg;
	border-color: @state-success-border;
	color: @state-success-text;
}
.d-toaster-type-error {
	background-color: @state-danger-bg;
	border-color: @state-danger-border;
	color: @state-danger-text;
}