.themeisle-onboarding-component {
	background: #ffffff;
	border: 1px solid #e7e7e7;
	padding: 50px;

	.components-placeholder__label {
		svg {
			min-width: 20px;
			min-height: 20px;
			max-width: 24px;
			max-height: 24px;
			margin-right: 5px;
		}
	}

	.themeisle-layout-picker {
		width: 100%;

		.wp-block-themeisle-blocks-advanced-column-layout {
			cursor: pointer;
			width: calc( 100% / 6 );
			min-width: 5vw;
			display: inline-block;
			padding: 5px 5px 0px;
	
			svg {
				fill: #d5dadf;
			}
	
			&:hover {
	
				svg {
					fill: #6d7882;
				}
			}
	
			&.selected {
	
				svg {
					fill: #6d7882;
				}
			}
		}
	}

	.themeisle-template-library {
		font-size: 14px;
		height: auto;
		padding: 10px 20px;
		margin-top: 10px;
		display: flex;
		align-items: center;

		svg {
			margin-right: 10px;
		}
	}
}

.themeisle-library-modal {
	.components-modal__content {
		padding: 0;
	
		.components-modal__header {
			display: none;
		}

		.library-modal-control-panel {
			background: #ffffff;
			position: sticky;
			top: 0;
			box-shadow: 0 0px 10px rgba(25,30,35,.2);
			z-index: 99999999;

			.library-modal-header {
				display: flex;
	
				.library-modal-header-logo {
					display: flex;
					flex-basis: 100%;
					justify-content: flex-start;
	
					.library-modal-header-tabs-button {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 17px 20px;
						background: transparent;
						border: 0;

						&.back-to-library {
	
							&:hover {
								background: #f2f2f3;
							}
		
							&:focus {
								background: #f2f2f3;
							}
		
							&:last-child {
								border-right: 1px solid #e6e9ec;
							}
						}
	
						svg {
							width: 20px;
							height: 20px;
							margin-right: 10px;
						}
					}
				}
	
				.library-modal-header-tabs {
					display: flex;
					flex-basis: 100%;
					justify-content: center;
	
					.library-modal-header-tabs-button {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 115px;
						padding: 17px 0;
						background: transparent;
						font-weight: 600;
						cursor: pointer;
						border: 0;
	
						&.is-selected {
							background: #f2f2f3;
						}
	
						&:hover {
							background: #f2f2f3;
						}
	
						&:focus {
							background: #f2f2f3;
						}
	
						svg {
							margin-right: 5px;
						}
					}
				}
	
				.library-modal-header-actions {
					display: flex;
					flex-basis: 100%;
					justify-content: flex-end;
	
					.library-modal-header-tabs-button {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 17px;
						background: transparent;
						font-weight: 600;
						cursor: pointer;
						border: 0;

						&.insert-button {
							font-weight: normal;

							svg {
								width: 16px;
								height: 16px;
								margin-right: 10px;
							}
						}
	
						&.is-selected {
							background: #f2f2f3;
						}
	
						&:hover {
							background: #f2f2f3;
						}
	
						&:focus {
							background: #f2f2f3;
						}
	
						&:last-child {
							border-left: 1px solid #e6e9ec;
						}
	
						svg {
							width: 20px;
							height: 20px;
						}
					}
				}
			}
	
			.library-modal-actions {
				display: flex;
				padding: 15px;
				background: #f2f2f3;
				justify-content: center;
	
				.components-base-control {
					.components-base-control__field {
						margin-bottom: 0;
					}
				}
	
				.library-modal-category-control {
					min-width: 200px;
					margin-right: 10px;

					select {
						height: 30px;
						min-width: 150px;
						padding: 0 5px;
					}
				}
		
				.library-modal-search-control {
					min-width: 200px;
					position: relative;
		
					&:after {
						content: "\F179";
						font-family: dashicons;
						pointer-events: none;
						display: block;
						position: absolute;
						right: 6px;
						top: 6px;
						font-size: 18px;
					}
				}
			}
		}

		.library-modal-error {
			.components-notice {
				display: flex;
				align-items: center;
				margin: 20px 40px -20px;

				&.library-modal-missing {
					details {
						margin-top: 5px;
	
						summary {
							color: #0073aa;
							text-decoration: underline;
							cursor: pointer;
						}
					}
	
					ul {
						list-style: disc;
						margin: 10px 0 0 12px;
					}

					.components-button {
						margin: 10px 5px;
						top: 0;
	
						&.components-notice__action {
							color: #0073aa;
							text-decoration: underline;
						}
					}
				}

				.components-button {
					top: unset;
				}
			}
		}

		.library-modal-content {
			display: grid;
			grid-template-columns: 50% 50%;
			padding: 20px;

			.library-modal-content__item {
				border: 1px solid #ccc;
				margin: 20px;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;

				&:hover,
				&:active,
				&:focus,
				&:focus-within {
					.library-modal-content__footer {
						.library-modal-content__footer_actions {
							opacity: 1;
						}
					}
				}

				.library-modal-content__preview {
					display: flex;
					align-items: center;
					height: 100%;

					img {
						margin: 0;
						width: 100%;
						height: auto;
						vertical-align: middle;
					}
				}

				.library-modal-content__footer {
					border-top: 1px solid #ccc;
					display: flex;
					justify-content: flex-end;

					.library-modal-content__footer_meta {
						flex: 4;

						.library-modal-content__footer_meta_title {
							margin-left: 15px;
						}

						.library-modal-content__footer_meta_author {
							margin-left: 15px;
						}
					}

					.library-modal-content__footer_actions {
						opacity: 0;
						display: flex;
						flex: 3;
						justify-content: flex-end;
						padding: 10px 15px;
						background-color: hsla(0,0%,96%,.7);
						border-left: 1px solid rgba(0,0,0,.05);
						transition: opacity .1s ease-in-out;

						button {
							position: relative;
							align-items: center;

							svg {
								margin-right: 5px;
							}

							&:first-child {
								margin-right: 10px;
							}
						}
					}
				}
			}
		}

		.library-modal-loader {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100px;
		}

		.library-modal-preview {
			background: #f2f2f3;   
			height: 750px;
			max-height: 85vh;
			overflow: hidden;
			padding: 25px 30px 30px;

			iframe {
				width: 150%;
				height: 150%;
				-webkit-transform: scale(.666) translateX(-25%) translateY(-25%);
				-ms-transform: scale(.666) translateX(-25%) translateY(-25%);
				transform: scale(.666) translateX(-25%) translateY(-25%);
			}
		}

		.components-modal__icon-container {
			svg {
				min-width: 20px;
				min-height: 20px;
				max-width: 24px;
				max-height: 24px;
				margin-right: 10px;
			}
		}
	}

	&.is-preview {
		overflow: hidden;
	}
}

.library-modal-category-selector {
	&.components-popover {
		&:not(.is-mobile) {
			&.is-bottom {
				z-index: 999999;
			}
		}
	}

	.components-menu-item__button {
		padding-left: 2rem;

		&.has-icon {
			padding-left: .5em;
		}
	}
}

@media ( max-width: 782px )  {
	.themeisle-onboarding-component {
		padding: 5em 1em;

		.themeisle-layout-picker {
			.wp-block-themeisle-blocks-advanced-column-layout {
				width: calc( 100% / 3 );
			}
		}
	}

	.themeisle-library-modal {
		.components-modal__content {
			.library-modal-control-panel {
				.library-modal-actions {
					flex-direction: column;

					.library-modal-category-control {
						margin: 0 0 10px 0;
					}
			
					.library-modal-search-control {
						width: 100%;
					}
				}
			}

			.library-modal-content {
				grid-template-columns: 100%;
			}
		}
	}
}


@media ( max-width:1439px ) {
	.themeisle-library-modal {
		width: 100%;
		max-width: 990px;
   }
}

@media ( min-width:1440px ) {
	.themeisle-library-modal {
		width: 100%;
		max-width: 1200px;
   }
}