.auth {
	display: flex;
	flex-direction: column;
	margin: {
		bottom: 0;
		left: auto;
		right: auto;
		top: 2rem;
	}
	max-width: 22rem;

	&__title {
		color: palette(black);
		font: {
			size: 1.9rem;
		}
	}

	&__form {
		flex-direction: column;
		margin: {
			bottom: 3rem;
		}

		&__button {
			color: #fff;
			cursor: pointer;
			background: {
				color: palette(orange);
			}
			border: {
				color: palette(orange, dark);
				radius: $border-radius;
				style: solid;
				width: 1px;
			}
			box-shadow: $box-shadow;
			padding: {
				bottom: 9px;
				right: 11px;
				left: 11px;
				top: 9px;
			}
			font: {
				family: $sans-serif;
				size: 1rem;
				weight: 700;
			}
			margin-top: .5rem;
			transition: border-color $transition;
			min-width: 8rem;

			&:focus {
				outline: 0;
			}

			&:hover {
				border-color: palette(orange, x-dark);
			}
		}
	}

	a {
		outline: 0;
		align-self: center;
		border-bottom: {
			color: palette(gray, light);
			style: solid;
			width: 1px;
		}
		color: palette(gray);
		font: {
			family: $sans-serif;
			size: .95rem;
		}
		text-decoration: none;
	}
}
