/**
 * Web Preview
 */

@use "~@wordpress/base-styles/colors" as wp-colors;
@use "../../../../packages/colors/colors.module" as colors;

.newspack-web-preview {
	// Color
	--wp-admin-theme-color: #{colors.$primary-600};
	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};

	background: #{colors.$neutral-700};
	box-sizing: border-box;
	height: 100%;
	left: 0;
	margin: 0;
	max-width: 100%;
	padding: 32px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99999;

	&.phone iframe {
		max-width: 380px;
	}

	&.tablet iframe {
		max-width: 768px;
	}

	&.is-loaded iframe {
		opacity: 1;
	}

	&--open {
		overflow: hidden;
	}

	&__interior {
		animation: appear-animation 125ms ease-in-out;
		animation-fill-mode: forwards;
		background: white;
		border-radius: 2px;
		overflow: hidden;
		height: 100%;
		width: 100%;
	}

	&__content {
		background: wp-colors.$gray-100;
		height: calc(100% - 49px);
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
		width: 100%;

		iframe {
			background: #fff;
			display: block;
			height: 100%;
			margin: 0 auto;
			max-width: 100%;
			opacity: 0;
			outline: 1px solid wp-colors.$gray-300;
			padding: 0;
			pointer-events: all;
			transition: max-width 125ms ease-in-out, opacity 250ms ease-in-out;
			width: 100%;
		}
	}

	&__is-waiting {
		align-items: center;
		display: flex;
		left: 50%;
		margin: -12px 0 0;
		position: absolute;
		top: 50%;
		transform: translateX(-50%);
	}

	&__toolbar {
		border-bottom: 1px solid wp-colors.$gray-300;
		display: flex;
		padding: 6px;

		&-left {
			flex: 0 0 auto;

			.newspack-button-group {
				display: flex;
				margin: 0;
			}

			.newspack-button {
				display: none;
				padding: 0 !important;

				&.is-selected {
					background: var(--wp-admin-theme-color);
					color: white;

					&:active,
					&:focus,
					&:hover {
						box-shadow: none !important;
						color: white;
						outline: none;
					}

					&:focus {
						box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color), inset 0 0 0 3px white !important;
					}
				}

				@media screen and ( min-width: 528px ) {
					&.is-phone,
					&.is-tablet {
						display: flex;
					}
				}

				@media screen and ( min-width: 816px ) {
					&.is-desktop {
						display: flex;
					}
				}
			}
		}

		&-right {
			display: flex;
			flex: 1;
			justify-content: flex-end;
		}

		.newspack-button {
			border-radius: 0 !important;
		}
	}
}

@keyframes appear-animation {
	from {
		margin-top: 32px;
	}
	to {
		margin-top: 0;
	}
}
