@import url( https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap );
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.is-p2-invite.invite-accept {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100vw;
	background: #fff;
	color: var(--p2-color-text);
	font-family: var(--p2-font-inter);
	letter-spacing: -0.01em;
	overflow-y: scroll;
	overflow-x: hidden;

	.invite-accept__form {
		max-width: unset;
		padding: 2rem 1.5rem 0;
		height: calc(100% - 2rem);

		> div {
			display: flex;
			flex-direction: column;
			height: 100%;
		}
	}

	.invite-accept-header {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.invite-accept-header__site-icon {
		width: 56px;
		height: 56px;
		border-radius: 2px;
		margin-bottom: 1.5rem;
		background:
			url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNTYiIHZpZXdCb3g9IjAgMCA1NiA1NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMS41QzAgMC42NzE1NzQgMC42NzE1NzMgMCAxLjUgMEg1NC41QzU1LjMyODQgMCA1NiAwLjY3MTU3MyA1NiAxLjVWNTQuNUM1NiA1NS4zMjg0IDU1LjMyODQgNTYgNTQuNSA1NkgxLjVDMC42NzE1NzQgNTYgMCA1NS4zMjg0IDAgNTQuNVYxLjVaIiBmaWxsPSIjMDAxMDFDIi8+CjxwYXRoIGQ9Ik0zOS42NjY4IDE0SDE2LjMzMzVWMjhIMzkuNjY2OFYxNFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMC4zMzM1IDMyLjY2NjdIMTYuMzMzNVY0MkgzMC4zMzM1VjMyLjY2NjdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=)
			no-repeat 0 0;
		background-color: var(--p2-color-text);

		span {
			display: none;
		}

		@include break-mobile {
			margin-bottom: 2rem;
		}
	}

	.invite-accept-header__join-site-title {
		font-size: var(--p2-font-size-form-xl);
		font-weight: 900; /* stylelint-disable-line scales/font-weights */
		margin: 0 0 1rem;
		letter-spacing: -0.02em;
		line-height: 1.35;
		text-align: center;

		@include break-mobile {
			font-size: var(--p2-font-size-form-xxl);
			margin-bottom: 1.5rem;
		}
	}

	.invite-accept-header__join-site-text {
		text-align: center;
		font-size: var(--p2-font-size-form-s);
		line-height: 1.8;
		margin-bottom: 2.5rem;
		max-width: 400px;
	}

	.is-busy button,
	button.is-busy {
		background-image: none;

		&::after {
			content: "";
			display: block;
			width: 24px;
			height: 24px;
			animation: p2-spinner 0.5s linear infinite;
			background:
				url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyIDIxLjYzNjRDMTcuMzIyIDIxLjYzNjQgMjEuNjM2MyAxNy4zMjIgMjEuNjM2MyAxMkMyMS42MzYzIDYuNjc4IDE3LjMyMiAyLjM2MzY1IDEyIDIuMzYzNjVDNi42Nzc5MyAyLjM2MzY1IDIuMzYzNTkgNi42NzggMi4zNjM1OSAxMkMyLjM2MzU5IDE3LjMyMiA2LjY3NzkzIDIxLjYzNjQgMTIgMjEuNjM2NFpNMTIgMjMuNjM2NEMxOC40MjY1IDIzLjYzNjQgMjMuNjM2MyAxOC40MjY2IDIzLjYzNjMgMTJDMjMuNjM2MyA1LjU3MzQzIDE4LjQyNjUgMC4zNjM2NDcgMTIgMC4zNjM2NDdDNS41NzMzNiAwLjM2MzY0NyAwLjM2MzU4NiA1LjU3MzQzIDAuMzYzNTg2IDEyQzAuMzYzNTg2IDE4LjQyNjYgNS41NzMzNiAyMy42MzY0IDEyIDIzLjYzNjRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTIgMi4zNjM2NUM2LjY3NzkzIDIuMzYzNjUgMi4zNjM1OSA2LjY3OCAyLjM2MzU5IDEySDAuMzYzNTg2QzAuMzYzNTg2IDUuNTczNDMgNS41NzMzNiAwLjM2MzY0NyAxMiAwLjM2MzY0N1YyLjM2MzY1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+)
				no-repeat 0 0;
		}
	}

	.invite-accept-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1.5rem 0;

		.invite-accept-footer__w-logo {
			width: 20px;
			height: 20px;
			margin-right: 8px;
		}

		.invite-accept-footer__footer-text {
			font-size: var(--p2-font-size-form-xxs);
		}
	}

	// invite-accept-logged-in
	.invite-accept-logged-in > div {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.invite-accept-logged-in__form-container {
		max-width: 500px;
		margin: 1rem auto 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		@include break-mobile {
			margin-top: 2rem;
		}
	}

	.invite-accept-logged-in__join-as {
		margin: 0 0 2.5rem;

		.gravatar {
			width: 48px;
			height: 48px;
			margin-bottom: 1rem;
		}
	}

	.invite-accept-logged-in__join-as-text {
		color: var(--p2-color-text);
		font-size: var(--p2-font-size-form-s);
	}

	.invite-accept-logged-in__join-as-username {
		font-weight: 600;
	}

	.invite-accept-logged-in__buttons {
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 400px;
		width: 100%;
		margin: 0 auto;
	}

	// invite-accept-logged-out
	.invite-accept-logged-out__form-container {
		max-width: 500px;
		margin: 1rem auto 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		@include break-mobile {
			margin-top: 2rem;
		}
	}

	.invite-accept-logged-out__footer-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: var(--p2-font-size-form-xxs);
	}

	.signup-form {
		max-width: 400px;
		width: 100%;
		margin: 0 1.5rem 2rem;
	}
}

@keyframes p2-spinner {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}
