/**
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: BI
 *
 * (C) Copyright IBM Corp. 2015, 2018
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
*/

.glass .toast-success .toast-message,
.glass .toast-info .toast-message,
.glass .toast-warning .toast-message,
.glass .toast-error .toast-message {
	@include theming(color, gray5);
	font-family: $font-family;
	position: relative;
	margin: auto;
	margin-right: 10px;
	flex: 1 0 0;
	/**
	* A max-width must be specified otherwise long words will stretch the toast
	* message beyond the toast container area when the text is word-wrapped.
	* See defect 185323 for details.
	*/
	max-width: 85%;
	/**
	 * A width property is also required because of a bug in Internet Explorer.
	 * See defect 187386 for details.
	 */
	width: 85%;
}

.glass #toast-container.toast-top-center > div {
	min-width: 700px;
	@include theming('background-color', background-color);
	border-top-width: 4px;
}

.glass #toast-container > div.toast-success {
	@include theming(border-top-color, communication1);
}
.glass .toast-success .svgIcon {
	@include theming(fill, communication1);
}

.glass #toast-container > div.toast-error {
	@include theming(border-top-color, communication3);
}
.glass .toast-error .svgIcon {
	@include theming(fill, communication3);
}

.glass #toast-container > div.toast-info {
	@include theming(border-top-color, communication2);
}
.glass .toast-info .svgIcon {
	@include theming(fill, primary2);
}

.glass #toast-container > div.toast-warning {
	@include theming(border-top-color, communication2);
}
.glass .toast-warning .svgIcon {
	@include theming(fill, communication2);
}

.glass #toast-container {
	position: relative;
}

.glass #toast-container>.toast-success {
	background-image: none !important;
}

.glass #toast-container>.toast-info {
	background-image: none !important;
}

.glass #toast-container>.toast-warning {
	background-image: none !important;
}

.glass #toast-container>.toast-error {
	background-image: none !important;
}

.glass #toast-container .toast-icon {
	height: 24px;
	width: 24px;
	margin: auto;
	margin-left: $space-s;
	margin-right: $space-s;
}

.glass #toast-container .svgIcon {
	height: 24px;
	width: 24px;
}


.glass button.toast-close-label:focus {
	outline-offset: 1px;
	outline: 1px dotted $focus;
}

.glass.accessibilityMode .toast-close-button {
	&:focus[tabindex] {
		outline: 0;
	}
	&:focus svg {
	  outline: 1px dotted $focus;
	}
}

.glass .toast-close-label.toast-close-button {
	top: 0;
	right: 0;
	height: 22px;
	margin: auto;
	margin-right: $space-s;
	@include theming(color, gray4);
	white-space: nowrap;
}

.glass .toast-close-div.toast-close-button {
	height: 24px;
	width: 24px;
	top: 0;
	right: 0;
	margin:auto;
	margin-right: $space-s;
	@include theming(fill, gray4);
}

.glass .toast-close-button:before {
	position: absolute;
}

.glass #toast-container .toast-close-div.toast-close-button .svgIcon {
	@include theming(fill, gray4);
	height: 16px;
	width: 16px;
}

.glass #toast-container>div {
	cursor: default;
	opacity: $opacity-max;
	bottom: auto;
	text-align: left;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	filter: alpha(opacity = 100);
	padding: 13px 0px;
	box-shadow: none;
	position: relative;
	border: 1px solid $gray1;
	@extend %body-text;
}

.glass #toast-container>div.toast-success,
.glass #toast-container>div.toast-error,
.glass #toast-container>div.toast-warning,
.glass #toast-container>div.toast-info {
	display: flex;
	flex-direction: row-reverse;
}

.glass .toast-top-center {
	top: $space-xl;
}

.glass .toast-close-button {
	opacity: $opacity-max;
	@extend %body-text;
}

.glass #toast-container button.secondaryButton {
	border: none;
	margin-right: 10px;
	@include theming(color, gray4);
}

.glass #toast-container button.secondaryButton:hover,
.glass #toast-container button.secondaryButton:focus {
	opacity: $opacity-mid;
}

@media ( max-width :521px) {
	.glass .toast-top-center {
		top: 5.15em;
	}
}