/* Patterns - Interaction - Notification */
/* Since this pattern is Deprecated, it should not appear at SASSDCS! */

.notification {
	background-color: var(--color-neutral-0);
	border: var(--border-size-s) solid var(--color-neutral-4);
	border-radius: var(--border-radius-soft);
	box-shadow: var(--shadow-xl);
	color: var(--color-neutral-10);
	left: 50%;
	padding: var(--space-m);
	position: fixed;
	top: 0;
	transform: translateY(-120%) translateX(-50%);
	user-select: none;
	width: 370px;
	z-index: var(--layer-global-off-canvas);

	// Service Studio Preview
	& {
		-servicestudio--webkit-transform: translateY(0);
		-servicestudio-position: static;
		-servicestudio-transform: translateY(0);
	}

	&-content {
		align-items: center;
		display: flex;
	}

	&--visible {
		transform: translateY(24px) translateX(-50%);

		&.notification--animatable {
			transition: all 330ms ease-out;
		}
	}

	&--animatable {
		transition: all 130ms ease-in;
	}
}

.layout-native {
	.notification {
		left: 50%;
		margin-left: -185px;
		transform: translateY(-120%) translateX(0);

		// Service Studio Preview
		& {
			-servicestudio-left: 0;
			-servicestudio-margin-left: 0;
			-servicestudio-transform: none;
		}

		&--visible {
			transform: translateY(24px) translateX(0);
		}
	}
}

.slide-from-left-enter,
.slide-from-left-leave,
.slide-from-right-enter,
.slide-from-right-leave,
.slide-from-top-enter,
.slide-from-top-leave,
.slide-from-bottom-enter,
.slide-from-bottom-leave,
.fade-enter,
.fade-leave {
	.layout-native {
		.notification {
			display: none;
		}
	}
}

// Responsive --------------------------------------------------------------------
.tablet {
	.layout-native {
		.notification {
			left: 50%;
			margin-left: -185px;
		}
	}
}

.phone {
	.layout-native {
		.notification {
			left: 16px;
			margin-left: 0;
			right: 16px;
			width: auto;
		}
	}
}

.android[data-status-bar-height] {
	.layout-native {
		.notification--visible {
			margin-top: var(--status-bar-height);
		}
	}
}

.ios {
	&.phone {
		&.landscape {
			.layout-native {
				.notification {
					left: calc(var(--os-safe-area-left) + 16px);
					right: calc(var(--os-safe-area-right) + 16px);
				}
			}
		}
	}

	.layout-native {
		.notification--visible {
			margin-top: var(--status-bar-height);
		}
	}
}