.two-factor-authentication__illustration {
	position: relative;
	margin-bottom: 1em;
	width: 100%;
	height: 180px;
	pointer-events: none;
}

.two-factor-authentication__illustration-device {
	position: absolute;
	top: 0;
	left: calc(50% - 176px); // (100% - 352px) / 2
	width: 352px;
	height: 180px;
}

.two-factor-authentication__illustration-screen {
	position: absolute;
	top: 66px;
	left: calc(50% - 126px); // (100% - 352px) / 2 + 50px
	color: var(--color-text-inverted);
	font-size: $font-body-small;
	font-weight: 600;
	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	line-height: 1em;
}

.two-factor-authentication__illustration-notification-container {
	position: absolute;
	top: 60px;
	bottom: 0;
	left: calc(50% - 132px); // (100% - 352px) / 2 + 44px
	padding-top: 4px;
	width: 264px;
	overflow: hidden;
}

.two-factor-authentication__illustration-notification {
	position: absolute;
	top: -67px;
	width: 264px;
	height: 70px;
	will-change: transform;
	animation: two-factor-authentication__illustration-slide 0.65s ease-out;
	animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	animation-fill-mode: forwards;
	animation-delay: 1s;
}

@keyframes two-factor-authentication__illustration-slide {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(0, 70px, 0);
	}
}
