// New Paywall paage styles.
@import "../components/overlay";

.rev-gen-preview-main {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;

	&--post {
		display: none;
		width: 730px;
		height: 100%;
		color: #808080;
		align-self: center;
		position: relative;
		padding: 0 5px;
		&--title {
			color: #000;
			margin-top: 60px;
			font-size: 20px;
			text-align: center;
		}

		&--excerpt {
			font-size: 16px;
		}

		&--content {
			font-size: 14px;
		}
	}

	&--search {
		position: fixed;
		top: 30px;
		z-index: 9999;
		display: flex;
		flex-direction: row;
		align-self: center;
		align-items: center;
		width: 732px;
		height: 50px;
		padding: 0 15px;
		border: 1px solid #fefefe;
		border-radius: 4px;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		background-color: rgba(255, 255, 255, 0.9);

		&.searching {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		label {
			line-height: 1.7;
			font-size: 17px;
			font-weight: 500;
			font-stretch: normal;
			font-style: normal;
			letter-spacing: normal;
		}

		input {
			flex: 1;
			min-width: 420px;
			height: auto;
			min-height: auto;
			margin: 0 0 0 5px;
			padding: 0;
			border: 1px solid transparent;
			border-radius: 0;
			line-height: 1.5;
			font-size: 17px;
			font-stretch: normal;
			font-style: normal;
			letter-spacing: normal;
			color: #1e1e1e;
			background: transparent;

			&:focus {
				box-shadow: none;
			}
		}

		i {
			position: relative;
			top: 2px;
			background: url(../img/icon-search.svg) no-repeat right 0 bottom;
			background-size: 18px 18px;
			width: 18px;
			height: 18px;
		}

		&-results {
			display: none;
			position: fixed;
			flex-direction: column;
			align-self: center;
			top: 51px;
			left: -1px;
			z-index: 5;
			width: 100%;
			max-height: 250px;
			overflow-y: auto;
			padding: 7px 0;
			border: 1px solid #fefefe;
			border-top: 0;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
			background-color: rgba(255, 255, 255, 0.9);

			span {
				cursor: pointer;
				color: #333;
				margin: 7px 0;
				font-size: 17px;

				&::before {
					padding: 0 10px;
					color: rgba(51, 51, 51, 0.2);
				}
			}
		}
	}

	&--paywall-actions {
		align-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		position: fixed;
		bottom: 0;
		z-index: 9999;
		min-width: 732px;
		max-width: 900px;
		height: 52px;
		padding: 0 15px;
		border-radius: 4px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
		font-size: 17px;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);

		&-wrap {
			margin-right: 15px;
			flex: 1;
			display: flex;
			align-items: center;
		}

		&-apply {
			display: flex;
			align-items: center;
			height: 15px;
			line-height: normal;
			margin: 10px 10px 10px;

			.select2 {
				font-size: 17px;
				.select2-selection--single {
					background-color: transparent;
				}
				.select2-selection__arrow {
					background-color: transparent;
				}
			}

			span.rev-gen-preview-main-paywall-name {
				position: relative;
				top: 1px;
				font-weight: 500;
				padding-bottom: 2px;
				border-bottom: 2px solid #000;
				min-width: 50px;
				margin: 0 5px;
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				text-align: center;
			}

			.rev-gen-preview-main-paywall-applies-to {
				border: 0;
				align-self: center;
				border-bottom: 2px solid;
				border-radius: 0;
				color: #333;
				font-size: 14px;
				line-height: normal;
				font-weight: 500;
				background: #fff url(../img/select-down.svg) no-repeat right 5px top 55%;
				background-size: 13px 8px;
				+ .select2-container {
					margin-left: 5px;
					.select2-selection__rendered {
						padding-left: 0;
					}
				}
			}

			select {
				&:focus {
					color: #333;
					border-color: unset;
					box-shadow: unset;
				}
			}
		}

		&__search {
			position: relative;
			.select2 {
				font-size: 17px;
			}
			.select2-container {
				width: 180px !important; /* stylelint-disable-line declaration-no-important */
				padding: 0;
				.select2-search {
					margin-bottom: 0;
				}
				.select2-selection.select2-selection--multiple {
					border: 0;
				}
				span.selection {
					span.select2-selection--multiple {
						position: relative;
						bottom: 6px;
						background: transparent;
						ul.select2-selection__rendered {
							position: relative;
							top: 6px;
							display: flex;
							height: 90%;
							flex-flow: column wrap;
							justify-content: flex-end;
							li.select2-selection__choice {
								display: none;
							}
							li.select2-search.select2-search--inline {
								margin-bottom: 0;
							}
						}
					}
				}
				&--open {
					height: auto;
					bottom: 40px;
					span.selection {
						span.select2-selection--multiple {
							height: 105px;
							position: relative;
							overflow-y: scroll;
							bottom: 0;
							border-left: 1px solid #2e2e2e;
							border-right: 1px solid #2e2e2e;
							border-radius: 0;
							background-color: #fff;
							ul.select2-selection__rendered {
								top: 10px;
								li.select2-selection__choice.select2-selection__choice {
									display: block;
								}
							}
						}
					}
					+ .rev-gen-preview-main--paywall-actions__search-icon {
						top: 43px;
						right: 1px;
					}
				}
			}
			&-icon {
				position: absolute;
				align-self: center;
				right: 0;
				top: 3px;
				display: inline-block;
				background: url(../img/icon-search.svg) no-repeat right 0 bottom;
				background-size: 16px 16px;
				width: 16px;
				height: 16px;
			}
		}

		&-update {
			margin-left: auto;
			button {
				cursor: pointer;
				border: 2px solid #1d1d1d;
				padding: 6px 13px;
				font-weight: bold;
				font-size: 17px;
				border-radius: 3px;

				&:disabled {
					cursor: not-allowed;
				}
			}

			&-save {
				background-color: transparent;
				color: #1d1d1d;
				&:disabled {
					opacity: 0.2;
				}
			}

			&-publish {
				background-color: #1d1d1d;
				color: #fff;
				&:disabled {
					opacity: 0.5;
				}
			}
		}

		&-add {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			justify-content: center;

			p {
				margin: 0;
				margin-right: 30px;
			}

			button {
				cursor: pointer;
				width: 130px;
				height: 35px;
				border: 2px solid #000;
				padding: 5px;
				font-weight: 600;
				font-size: 14px;
				border-radius: 3px;
				background-color: #000;
				color: #fff;
			}

			.goto-dashboard-button {
				cursor: pointer;
				width: 130px;
				height: 35px;
				border: 2px solid #000;
				padding: 5px;
				font-weight: 600;
				font-size: 14px;
				border-radius: 3px;
				background-color: #fff;
				color: #000;
				margin-right: 20px;
			}
		}
	}

	.blur-content {
		position: relative;
		min-height: 900px;
		filter: blur(5px);
		opacity: 0.5;
	}

	&-info-modal {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: fixed;
		left: 50%;
		top: 50%;
		overflow: hidden;
		width: 392px;
		height: 506px;
		border-radius: 4px;
		padding: 20px;
		background-color: #fff;
		color: #1e1e1e;
		z-index: 999;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
		text-align: center;
		padding-bottom: 55px;
		margin-left: -115px;
		margin-top: -253px;
		&-title {
			font-family: HelveticaNeue, serif;
			font-size: 26px;
			font-weight: 500;
			font-stretch: normal;
			font-style: normal;
			line-height: 1.23;
			letter-spacing: normal;
			margin: 0;
			padding: 55px;
		}

		&-message {
			font-family: HelveticaNeue, serif;
			font-size: 16px;
			font-weight: 500;
			font-stretch: normal;
			font-style: normal;
			line-height: 1.31;
			letter-spacing: normal;
			padding: 0 55px;
		}

	}

	.rev-gen-footer {
		position: static;
		justify-content: center;
	}

}

.modal-blur.modal-blur {
	background-color: #a9a9a9;
	overflow: hidden;
	height: 100%;
	button.rev-gen-contribution-main-generate-button,
	button.rev-gen-settings-main-option-info,
	a.rev-gen-contribution-main--help-button {
		color: #000;
		img {
			opacity: 0.6;
		}
	}
}

.rev-gen-snackbar {
	z-index: 9999;
	left: 50%;
	top: 50%;
	height: 25px;
	position: fixed;
	transform: translate(-50%, 0);
	margin-left: 75px;
}

.rev-gen-exit-tour {
	visibility: hidden;
	position: fixed;
	z-index: 15;
	bottom: 10px;
	right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.laterpay-loader-wrapper {
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	position: fixed;
	z-index: 1000;
	backdrop-filter: blur(5px);
	top: 0;
	img {
		width: 150px;
		position: absolute;
		top: 40%;
		animation: breathing 2s ease-out infinite normal;
		left: 40%;
		transform: translate(-50%, 0);
	}
}

@keyframes breathing {
	0% {
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		transform: scale(0.9);
	}

	25% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}

	60% {
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		transform: scale(0.9);
	}

	100% {
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		transform: scale(0.9);
	}
}

@keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@media screen and (max-width: 782px) {
	.rev-gen-preview-main {
		&--paywall-actions {
			width: 90%;

			&-apply {
				p {
					margin: 15px 15px 5px;
				}

				.rev-gen-preview-main-paywall-applies-to {
					font-size: 14px;
					padding: 10px 24px 0 8px;
				}
			}
		}

		&-info-modal {
			left: 35%;
		}
	}
}

@media (max-width: 1279px) {
	.rev-gen-preview-main {
		&--post {
			width: 70%;
		}

		&-info-modal {
			top: 15%;
			padding-bottom: 25px;
		}
	}
}

.rev-gen-email-support {
	position: fixed;
	bottom: 10px;
	right: 10px;
}

select.rev-gen__select2 {
	+ .select2-container {
		.select2-selection {
			min-height: auto;
			height: auto;
			font-weight: 500;
			span.select2-selection__rendered {
				line-height: 24px;
				color: #1d1d1d;
			}
			&__arrow {
				height: 23px;
			}
		}
	}
}

body.modal-blur .rev-gen-preview-main--search {
	border-color: transparent;
}
