@import '../../../styles/_partials/index'

.FlyModalOverlay
	position: fixed
	display: flex
	align-items: center
	justify-content: center
	top: 0
	left: 0
	right: 0
	bottom: 0
	background: rgba($gray-dark, .85)
	animation: fadeIn .2s ease 0s
	font-weight: 300
	z-index: 10

.FlyModal
	width: 600px
	height: auto
	@include theme-background-white-else-graydark50
	border-radius: 4px
	text-align: center
	position: relative
	z-index: 10

	> div
		width: 100%
		overflow-y: auto
		max-height: 93vh
		padding: 60px

	&.FlyModal__HasIcon
		overflow: visible

	@at-root :global(.TopIcon)
		$size: 116px

		position: absolute
		top: 0
		left: 50%
		width: $size
		height: $size
		background: $green
		border-radius: 100%
		margin: calc($size / -2) 0 0 calc($size / -2)
		display: flex
		justify-content: center
		align-items: center

		&.TopIcon__Red
			background: $red

		&.TopIcon__Orange
			background: $orange-alt

		svg
			width: 58px
			height: 58px
			fill: $white

	.Title
		margin: 0
		line-height: 140%

	@at-root :global(.TopIcon) + .Title
		margin-top: 20px

	hr
		border: none // must clear all four side's default styles
		@include theme-border-top(0%, 15%)
		height: 1px
		margin: 30px 0

	p:last-of-type
		margin-bottom: 0

	input[type="text"]
		@include flywheelInput

	button
		margin-top: 30px

	label
		font-weight: 300

	div.Switch
		label
			text-transform: none
			letter-spacing: normal
			color: $gray-dark
			font-size: 14px
			font-weight: 500
			margin-right: 10px

		input
			margin: 0

	.MessageAboveButton
		@include theme-color-gray-else-gray25
		margin: 30px 0

	.FormRow + .Checkbox
		margin-top: 10px
		display: inline-block

	.EnvironmentChangelog
		ul
			margin: 0
			padding: 0
			list-style: none
			list-style-position: inside

			li
				margin: 8px 0

				&:last-of-type
					margin-bottom: 0