@import '../_partials/index';

:global {
	.Flywheel {
		@include theme-background-gray5-else-graydarkalt;
		flex-grow: 1;
		@extend .__FlexColumn;
		overflow-y: auto;
	}

	.FlywheelSites {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.FlywheelSitesList {
		padding: 30px;
		overflow-y: auto;
		flex-direction: column;
		flex: 1;
	}

	.FlywheelConnect {
		@extend .__FlexColumn;
		justify-content: center;
		flex-grow: 1;
		height: 100%;

		.Inner {
			width: 644px;
			align-self: center;
			text-align: center;
		}

		.Middle {
			display: flex;

			p {
				font-weight: 300;
				@include theme-color-gray-else-gray25;
				line-height: 20px;
			}

			.Text {
				margin: 10px 0 0 40px;
				text-align: left;
			}
		}

		.Bottom {
			margin-top: 35px;
			padding-top: 30px;
			width: 100%;
			@include theme-border-top;
			text-align: center;
			display: flex;
			flex-direction: column;

			.button {
				display: inline-block;

				&:first-child {
					margin-bottom: 17px;
				}
			}
		}
	}

	header.FlywheelHeader {
		padding: 30px 30px 25px;
		display: flex;
	}

	.FlySite {
		display: flex;
		align-items: center;
		padding: 10px;
		@include theme-background-white-else-graydark;
		border-radius: 4px;
		margin: 0 0 10px;
		box-shadow: 0 3px 5px 0 rgba($gray-dark, 0.08);

		&.FlySite__Incompatible {
			border: 2px dashed $gray15;
			border-radius: 4px;
			background: transparent;
		}

		img {
			width: 146px;
			height: 88px;
			margin: 0 26px 0 0;
			cursor: pointer;
		}

		button {
			margin: 0 20px 0 0;
		}

		.SiteIncompatibility {
			margin: 0 20px 0 auto;
			color: $gray;
			font-weight: 300;

			svg {
				width: 14px;
				height: 14px;
				vertical-align: middle;
				margin-right: 10px;

				path {
					fill: $yellow;
				}
			}
		}

		.SiteConnections {
			margin: 0 20px 0 auto;

			strong {
				font-weight: 500;
			}
		}

		.SiteStatus {
			margin: 0 20px 0 auto;
			line-height: 22px;
			color: $gray25;
			font-weight: 300;

			.Spinner {
				vertical-align: middle;
				width: 18px;
				height: 22px;
				animation: rotateSpinner 1s linear infinite;
				margin: 0 0 0 10px;

				path {
					fill: $gray25;
				}
			}
		}
	}

	.PullSiteExisting {
		> div.Inner {
			padding-bottom: 100px;
		}

		.FormRow {
			text-align: center;

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