@import '../definitions/variables';

$wrap-margin: 2em;

@keyframes error {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%, 80% {
		transform: translate3d(3px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-5px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(5px, 0, 0);
	}
}

.login {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;

	background: $background-footer;

	&__wrap {
		position: absolute;
		top: $wrap-margin;
		left: $wrap-margin;
		right: $wrap-margin;
		bottom: 4em;

		background: $background-box;
		border-radius: 6px;
		overflow: hidden;

		@include smaller($size-m) {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			border-radius: 0;

			&:before {
				content: '';
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				height: env(safe-area-inset-top);

				background: $background-footer;
			}
		}
	}

	&__icons {
		font-family: 'ubud';
		font-style: normal;
		font-weight: normal;
		speak: none;

		font-size: 2.5em;
		font-variant: normal;
		text-transform: none;
		color: darken($background-box, 10);

		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		span {
			position: absolute;
			top: 50%;
			left: 50%;

			@include smaller($size-m) {
				display: none;
			}

			&:nth-child(1) {
				margin: -180px 0 0 -200px;
				transform: rotate(20deg);
				font-size: 0.8em;
			}
			&:nth-child(2) {
				margin: -160px 0 0 -100px;
				transform: rotate(-3deg);
				font-size: 1.1em;
			}
			&:nth-child(3) {
				margin: -195px 0 0 10px;
				transform: rotate(8deg);
				font-size: 1em;
			}
			&:nth-child(4) {
				margin: -150px 0 0 100px;
				transform: rotate(-10deg);
				font-size: 1.1em;
			}
			&:nth-child(5) {
				margin: -100px 0 0 190px;
				transform: rotate(8deg);
				font-size: 0.7em;
			}
			&:nth-child(6) {
				margin: -120px 0 0 270px;
				transform: rotate(2deg);
				font-size: 1em;
			}
			&:nth-child(7) {
				margin: -90px 0 0 350px;
				transform: rotate(-7deg);
				font-size: 0.7em;
			}
			&:nth-child(8) {
				margin: -30px 0 0 390px;
				transform: rotate(2deg);
				font-size: 0.6em;
			}
			&:nth-child(9) {
				margin: -25px 0 0 290px;
				transform: rotate(-4deg);
				font-size: 0.9em;
			}
			&:nth-child(10) {
				margin: -35px 0 0 200px;
				transform: rotate(8deg);
				font-size: 0.9em;
			}
			&:nth-child(11) {
				margin: 35px 0 0 240px;
				transform: rotate(2deg);
				font-size: 1.1em;
			}
			&:nth-child(12) {
				margin: -170px 0 0 190px;
				transform: rotate(-6deg);
				font-size: 0.6em;
			}
			&:nth-child(13) {
				margin: -118px 0 0 -20px;
				transform: rotate(-2deg);
				font-size: 0.6em;
			}
			&:nth-child(14) {
				margin: 25px 0 0 340px;
				transform: rotate(2deg);
				font-size: 0.9em;
			}
			&:nth-child(15) {
				margin: 20px 0 0 460px;
				transform: rotate(12deg);
				font-size: 0.6em;
			}
			&:nth-child(16) {
				margin: 65px 0 0 410px;
				transform: rotate(6deg);
				font-size: 1.1em;
			}
			&:nth-child(17) {
				margin: 90px 0 0 320px;
				transform: rotate(2deg);
				font-size: 0.9em;
			}
			&:nth-child(18) {
				margin: 120px 0 0 260px;
				transform: rotate(-4deg);
				font-size: 1em;
			}
			&:nth-child(19) {
				margin: 45px 0 0 180px;
				transform: rotate(2deg);
				font-size: 0.6em;
			}
			&:nth-child(20) {
				margin: 125px 0 0 170px;
				transform: rotate(-6deg);
				font-size: 0.9em;
			}
			&:nth-child(21) {
				margin: 95px 0 0 85px;
				transform: rotate(2deg);
				font-size: 0.8em;
			}
			&:nth-child(22) {
				margin: 125px 0 0 -10px;
				transform: rotate(5deg);
				font-size: 1em;
			}
			&:nth-child(23) {
				margin: 125px 0 0 -70px;
				transform: rotate(-5deg);
				font-size: 0.7em;
			}
			&:nth-child(24) {
				margin: 90px 0 0 -150px;
				transform: rotate(-2deg);
				font-size: 1em;
			}
			&:nth-child(25) {
				margin: 150px 0 0 70px;
				transform: rotate(-8deg);
				font-size: 0.8em;
			}
			&:nth-child(26) {
				margin: 120px 0 0 -230px;
				transform: rotate(7deg);
				font-size: 0.8em;
			}
			&:nth-child(27) {
				margin: 50px 0 0 -210px;
				transform: rotate(-4deg);
				font-size: 0.9em;
			}
			&:nth-child(28) {
				margin: -20px 0 0 -235px;
				font-size: 0.8em;
			}
			&:nth-child(29) {
				margin: -70px 0 0 -170px;
				transform: rotate(5deg);
				font-size: 0.8em;
			}
			&:nth-child(30) {
				margin: -120px 0 0 -220px;
				transform: rotate(-2deg);
				font-size: 1em;
			}
			&:nth-child(31) {
				margin: 85px 0 0 -370px;
				transform: rotate(-7deg);
				font-size: 1em;
			}
			&:nth-child(32) {
				margin: 45px 0 0 -300px;
				transform: rotate(4deg);
				font-size: 1em;
			}
			&:nth-child(33) {
				margin: 15px 0 0 -390px;
				transform: rotate(8deg);
				font-size: 1.1em;
			}
			&:nth-child(33) {
				margin: -75px 0 0 -320px;
				transform: rotate(-4deg);
				font-size: 1.1em;
			}
			&:nth-child(34) {
				margin: -160px 0 0 -310px;
				transform: rotate(3deg);
				font-size: 0.8em;
			}
			&:nth-child(35) {
				margin: -130px 0 0 -390px;
				transform: rotate(-6deg);
				font-size: 1.1em;
			}
			&:nth-child(36) {
				margin: -10px 0 0 -360px;
				transform: rotate(-6deg);
				font-size: 0.8em;
			}
			&:nth-child(37) {
				margin: -60px 0 0 -430px;
				transform: rotate(9deg);
				font-size: 0.7em;
			}
			&:nth-child(38) {
				margin: 30px 0 0 -430px;
				transform: rotate(9deg);
				font-size: 0.9em;
			}
			&:nth-child(39) {
				margin: -20px 0 0 -500px;
				transform: rotate(-4deg);
				font-size: 0.8em;
			}
			&:nth-child(40) {
				margin: 135px 0 0 -300px;
				transform: rotate(-4deg);
				font-size: 0.6em;
			}
			&:nth-child(41) {
				margin: 105px 0 0 -435px;
				transform: rotate(7deg);
				font-size: 0.7em;
			}
			&:nth-child(42) {
				margin: 60px 0 0 -480px;
				transform: rotate(7deg);
				font-size: 0.7em;
			}
			&:nth-child(43) {
				margin: 155px 0 0 -120px;
				transform: rotate(7deg);
				font-size: 0.6em;
			}
		}
	}

	&-gradient {
		position: absolute;
		width: 100%;
		height: 100%;
		background: radial-gradient(
						ellipse at center,
						rgba($background-box, 0) 0%,
						$background-box 90%,
						$background-box 100%
		);
	}

	&__logo {
		position: absolute;
		top: 1em;
		left: 1em;
		width: 5em;
		height: 5em;

		background: transparent url('/icon.svg');
		background-size: cover;
		border-radius: 4px;

		@include smaller($size-m) {
			top: 50%;
			left: 50%;
			margin: -14em 0 0 -2em;
		}
	}

	&__form {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 300px;
		height: 200px;
		margin: -100px 0 0 -150px;

		&-box {
			background: $background-box;
			border: 4px solid darken($background-box, 10);
			border-radius: 6px;
			padding: 0 5px;

			transform: translate3d(0, 0, 0);
			backface-visibility: hidden;
			perspective: 1000px;

			&--error {
				animation: error 0.85s cubic-bezier(.35,.07,.20,.97) both;
			}
		}

		&-input {
			display: block;
			box-sizing: border-box;
			width: 100%;
			padding: 12px 10px;

			background: none;
			border: none;
			outline: none;

			&::placeholder {
				opacity: .6;
			}

			&--error {
				background: rgba($red, 0.1);
			}

			&:first-child {
				border-bottom: 1px solid darken($background-box, 10);
			}
		}
	}

	&__terms {
		margin: 1em;
		font-size: 0.8em;
		overflow: hidden;
		color: rgba($text, 0.8);

		@include greater($size-l) {
			margin: 3em 2em 3em;
		}

		&-message {
			float: right;
			width: calc(100% - 1.6em);
		}
	}

	&__submit {
		margin-top: 15px;
	}

	&__minilinks {
		font-size: 13px;
		text-align: center;
		margin-top: 15px;
		color: lighten($text, 20);

		a:link,
		a:hover {
			color: inherit;
		}
	}

	&__footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: env(safe-area-inset-bottom);
		padding: 2em 2.5em;

		color: rgba($background, 0.5);
		font-size: 11px;
		text-align: center;

		@include smaller($size-m) {
			color: lighten($text, 40);
		}

		a:link,
		a:hover {
			color: inherit;
			text-decoration: none;
		}
	}
}