@import '../_partials/index';

:global {
	.AddSiteContent {
		@include theme-background-white-else-graydarkalt;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		flex: 1;

		.TabNav {
			padding: 0;
			justify-content: center;
		}

		.TabNav_Items {
			a {
				margin: 0 10px;
				padding-bottom: 10px;

				&.active {
					border-bottom-color: $green;
				}
			}
		}

		> div.Inner {
			display: flex;
			flex-grow: 1;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 50%;
			min-width: 590px;
			padding: 0 0 50px;
		}

		input.BigInput {
			width: 100%;
			height: 70px;
			@include flywheelInput;
			text-align: center;
			font-size: 24px;
			font-weight: 300;

			&::-webkit-input-placeholder {
				color: $gray25;
			}
		}

		> .GoBack {
			position: absolute;
			bottom: 20px;
			left: 20px;
		}

		> .Continue {
			position: absolute;
			bottom: 20px;
			right: 20px;
			padding: 20px 30px;
		}

		&.AddSiteContent__NoContinue {
			> .GoBack {
				bottom: 25px;
			}
		}

		.EnvironmentDetails { // needed for distributed Environments
			width: 100%;

			&.EnvironmentDetails__Form,
			&.#{deprecated(--Form, '2.5', '2.0', 'Needed for distributed Environments')} {
				margin-top: 32px;
				padding-top: 30px;
				@include theme-border-top;

				.FormRow {
					margin-bottom: 0;
				}
			}

			.EnvironmentSpaceRequired { // needed for distributed Environments
				margin: 30px 0 0;
				@include theme-color-gray-else-gray75;
				font-weight: 300;
				text-align: center;
			}

			ul.EnvironmentSpecs { // needed for distributed Environments
				list-style: none;
				padding: 0;
				margin: 30px 0 0;
				@include theme-color-graydark-else-white;
				font-weight: 300;
				text-align: center;

				strong {
					font-weight: 500;
				}

				li {
					display: inline-block;
					margin: 0 0 0 10px;
					padding: 0 10px 0 0;
					border-right: 1px solid $gray75;

					&:first-child {
						margin-left: 0;
					}

					&:last-child {
						border-right: 0;
					}
				}
			}

			p {
				color: $gray;
				text-align: center;
				font-weight: 300;
			}
		}

		.EnvironmentConnectCompatibility {
			width: 100%;
			margin-top: 30px;
			padding-top: 30px;
			@include theme-border-top;
			text-align: center;
			color: $gray75;

			svg {
				width: 32px;
			}

			// note: remains a lowercase modifier because it's set via a dynamic js variable
			&.EnvironmentConnectCompatibility__flywheel {
				color: $green;

				svg {
					fill: $green;
				}
			}

			// note: remains a lowercase modifier because it's set via a dynamic js variable
			&.EnvironmentConnectCompatibility__custom svg {
				fill: $gray25;

				.x {
					fill: $red;
				}
			}

			p {
				margin-top: 4px;
			}
		}
	}

	.AddSiteStepIndicator {
		color: $gray75;
		bottom: 27px;
		right: 30px;
		position: absolute;
		font-weight: 300;
	}
}