.cx-vui-notices {
	position: fixed;
	right: 20px;
	top: 52px;
	z-index: 9999;
	.rtl & {
		left: 20px;
		right: auto;
	}
}

.cx-vui-notice {
	padding: 20px;
	margin: 0 0 20px;
	transition: all 250ms ease;
	display: flex;
	align-items: flex-start;
	box-shadow: 0 2px 6px rgba(35, 40, 45, 0.07);
	min-width: 250px;
	max-width: 450px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 4px;
	font-size: 15px;
	line-height: 23px;
	color: $color__text;
	&__icon {
		width: 24px;
		height: 24px;
		overflow: hidden;
		flex: 0 0 24px;
		margin: 0 15px 0 0;
		.rtl & {
			margin: 0 0 0 15px;
		}
		svg {
			width: 100%;
			height: auto;
		}
		&--info {
			path {
				fill: $color__accent;
			}
		}
		&--success {
			path {
				fill: $color__success;
			}
		}
		&--error {
			path {
				fill: $color__error;
			}
		}
	}
	&__title {
		font-weight: 500;
		color: $color__heading;
	}
	&__content {
		flex: 1 1 auto;
	}
	&__close {
		width: 16px;
		height: 16px;
		flex: 0 0 16px;
		margin: -2px 0 0 10px;
		cursor: pointer;
		box-sizing: border-box;
		padding: 2px;
		.rtl & {
			margin: -2px 10px 0 0;
		}
		svg {
			width: 12px;
			height: 12px;
		}
		path {
			fill: $color__border-off-panel;
		}
		&:hover {
			path {
				fill: $color__heading;
			}
		}
	}
}

.cx-vui-notices-enter, .cx-vui-notices-leave-to {
	opacity: 0;
	transform: translateX( 30px );
	.rtl & {
		transform: translateX( -30px );
	}
}

.cx-vui-notices-leave-active {
	position: absolute;
}