.tpc-template-cloud-icon {
	max-width: 100%;
	max-height: 100%;
}

.tpc-template-cloud-modal {
	.components-modal__frame {
		width: 100%;

		.components-modal__content {
			padding: 0;

			.components-modal__header {
				display: none;
			}

			.modal-header {
				display: flex;
				border-bottom: 1px solid #e0e0e0;

				.left {
					display: flex;
					flex-basis: 20%;
					justify-content: flex-start;

					.tpc-template-cloud-icon {
						width: 60px;
						height: 60px;
						padding: 10px;
					}
				}

				.center {
					display: flex;
					flex-basis: 60%;
					justify-content: center;

					.tabs {
						height: 60px;
						font-size: 14px;
						color: #616161;
						font-weight: 500;
						border-radius: 0;
						padding-left: 25px;
						padding-right: 25px;

						&.is-active {
							box-shadow: inset 0 0 0 1.5px transparent, inset 0 -4px 0 0 #0073aa;
						}
					}
				}

				.right {
					display: flex;
					flex-basis: 20%;
					justify-content: flex-end;

					.components-button {
						width: 60px;
						height: 60px;
						border-left: 1px solid #e6e9ec;

						&:hover {
							background: #f1f1f1;
						}

						svg {
							width: 32px;
							height: 32px;
							fill: #616161;
						}
					}

					.components-button-group {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 60px;

						.components-button {
							border-left: 0;
							box-shadow: none;
							background: #f1f1f1;
							width: 38px;
							height: 38px;
							margin: 5px 10px;
							padding: 5px;
							border: 1px solid #d9d9d9;
							border-radius: 6px;

							&:hover {
								color: #f1f1f1;
								background: #0073aa;
								width: auto;
								border: 1px solid #0073aa;

								&:before {
									content: 'Sync';
									padding: 0 10px;
									font-weight: 500;
								}

								svg {
									fill: #f1f1f1;
								}
							}

							svg {
								width: 26px;
								height: 26px;
								padding: 0;
								fill: #0073aa;
							}
						}
					}
				}
			}

			.tpc-modal-content {
				background: #f1f1f1;
				padding: 20px 40px;

				.notices {
					.components-notice {
						margin: 0 0 20px 0;
						padding: 10px;
					}
				}

				.filters {
					display: flex;
					justify-content: space-between;
					padding-bottom: 20px;

					.display-sorting {
						display: flex;
						align-items: center;
						font-size: 11px;
				
						.sorting-label {
							flex-grow: 1;
							text-align: left;
							padding-right: 20px;
							border-right: 1px solid #d5dadf;
							text-transform: uppercase;
						}
				
						.sorting-filter {
							.components-button {
								padding: 0 0 0 20px;
								height: auto;
								color: inherit;
								font-size: inherit;
								text-transform: uppercase;
				
								&::after {
									width: 11px;
									content: " ";
									margin-left: 3px;
								}
				
								&.is-selected {
									&::after {
										font-family: dashicons;
										content: "\f142";
										margin-left: 3px;
									}
				
									&.is-asc {
										&::after {
											content: "\f140";
										}
									}
								}
							}
						}
					}

					.view-filters {
						display: flex;

						.search-filters {
							width: 200px;
							position: relative;
							margin-right: 20px;
				
							input {
								width: 100%;
								max-height: 36px;
								border: none;
								border-bottom: 1px solid #d5dadf;
								border-radius: 0;
								font-size: 11px;
								padding: 8px 15px 8px 0;
								transition: border .5s;
								background: none;
								box-shadow: none;
								color: #6d7882;
								outline: none;
							}
				
							svg {
								position: absolute;
								top: 50%;
								right: 0;
								transform: translateY(-50%);
							}
						}

						.components-button {
							&.is-pressed {
								background: transparent;
	
								svg {
									fill: #0073aa;
								}
							}
	
							svg {
								fill: #d9d9d9;
							}
						}
					}
				}

				.table-content {
					&.is-grid {
						display: grid;
						grid-template-columns: 25% 25% 25% 25%;
					}

					.table-row {
						display: flex;
						height: 60px;
						width: 100%;
						align-items: center;
						padding: 0 25px;
						background: #fff;
						border: 1px solid rgba(0, 0, 0, 0.11);
						border-top: none;

						&:first-child {
							border-top: 1px solid rgba(0, 0, 0, 0.11);
						}

						svg {
							height: 24px;
							margin-right: 10px;
							fill: #b9b9b9;
						}

						.row-title {
							display: flex;
							align-items: center;

							.components-base-control__field {
								margin: 0;
							}
						}

						.row-controls {
							display: flex;
							align-items: center;
							margin-left: auto;

							button {
								padding: 6px 30px;
								font-weight: 600;
								color: #b9b9b9;
							}
						}

						.actions {
							display: flex;
							margin-left: 50px;
							justify-content: flex-end;

							&.no-controls {
								margin-left: auto;
							}

							.components-button {
								padding: 6px 30px;

								&.is-primary {
									margin-left: 10px;
								}
							}
						}
					}

					.table-grid {
						border: 1px solid #ccc;
						margin: 10px;
						min-height: 350px;

						.grid-preview {
							display: flex;
							width: 100%;
							height: 300px;
							background-color: #b7c0cc;
							background-position: top center;
							background-size: cover;

							&:hover {
								background-color: #404040;
							}

							&.is-loading {
								background: #404040;

								.preview-actions {
									display: flex;
								}
							}

							.preview-actions {
								opacity: 0;
								transition: .3s ease opacity;
								width: 100%;
								height: auto;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								background-color: rgba(0, 0, 0, 0.9);
								display: flex;

								> .components-button {
									width: 120px;
									justify-content: center;
									margin-bottom: 10px;

									&.is-secondary {
										color: #ffffff;
										box-shadow: inset 0 0 0 2px #ffffff;

										&:disabled {
											background: transparent;
											opacity: 0.5;
										}
									}
								}

								.preview-controls {
									.components-button {
										width: 20px;

										svg {
											fill: #ffffff;
										}
									}
								}
							}

							&:hover {
								.preview-actions {
									opacity: 1;
								}
							}
						}

						.card-footer {
							background: #ffffff;
							border-top: 1px solid #ccc;
							padding: 15px;

							p {
								font-weight: 600;
								margin: 0;
							}
						}
					}
				}

				@import './scss/pagination';

				.preview-header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.right {
						.components-button {
							&:last-child {
								margin-left: 10px;
							}
						}
					}
				}

				.preview-content {
					margin: 20px 0;

					.block-editor-block-preview__container {
						max-height: 60vh;
						overflow: scroll;

						.block-editor-block-list__block {
							&:first-child {
								margin-top: 0;
								margin-bottom: 0;
							}
						}
					}
				}

				.components-placeholder {
					box-shadow: none;
					margin: 20px 0;
				}
			}
		}

		.components-spinner {
			margin: 0 auto;
		}
	}
}

.ti-tpc-components-panel {
	.components-button {
		margin: 20px 0;
	}
}

.controls-popover {
	.components-popover__content {
		padding: 10px;

		.popover-content {
			display: flex;
			justify-content: center;
			align-items: flex-end;

			.components-base-control__field {
				margin: 0;

				.components-text-control__input {
					max-height: 30px;
				}
			}

			.components-button {
				max-width: 30px;
				max-height: 30px;
			}
		}
	}
}

.components-button {
	&.is-loading {
		svg {
			-webkit-animation: icon-spin 2s linear infinite;
			animation: icon-spin 2s linear infinite;
		}
	}
}

.filter-overlay {
	.components-button {
		&:not( .has-icon ) {
			padding-left: 38px;
		}
	}
}

@media (max-width: 1439px) {
	.tpc-template-cloud-modal {
		.components-modal__frame {
			max-width: 990px;

			.components-modal__content {
				.tpc-modal-content {
					.table-content {
						&.is-grid {
							grid-template-columns: 33% 33% 33%;
						}
					}
				}
			}
		}
	}
}

@media (min-width: 1440px) {
	.tpc-template-cloud-modal {
		.components-modal__frame {
			max-width: 1200px;
		}
	}
}

@-webkit-keyframes icon-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

@keyframes icon-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

.tpc-preview-wrap-modal {
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;

	.components-modal__header {
		display: none;
	}

	@import "../../assets/src/scss/vars";
	@import "../../assets/src/scss/preview";

	.ob-preview {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
	}

}

@-webkit-keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}