/** @format */
.woocommerce-profile-wizard__body .woocommerce-profile-wizard__container {
	> .woocommerce-profile-wizard__themes-tab-panel {
		margin-bottom: $gap-large;

		@include breakpoint( '>782px' ) {
			max-width: 810px;

			.woocommerce-profile-wizard__themes {
				display: grid;
				grid-gap: $gap-large;
				grid-template-columns: 1fr 1fr;
			}
		}
	}
}

.woocommerce-profile-wizard__themes-tab-panel .components-tab-panel__tabs {
	display: flex;
	justify-content: space-between;
	background: $studio-white;
	box-shadow: $muriel-box-shadow-1dp;
	border-radius: 3px;
	margin-top: $gap-large;
	margin-bottom: $gap-large;

	button {
		border: 0;
		border-bottom: 1px solid transparent;
		color: $studio-gray-50;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		height: 48px;
		width: 100%;
		cursor: pointer;
		@include font-size(14);
		font-weight: 500;
		outline: none;
		padding: 0 $gap-large;

		&.is-active {
			border-bottom: 1px solid $studio-woocommerce-purple-60;
			color: $studio-woocommerce-purple-60;
		}
	}
}

.woocommerce-profile-wizard__body .woocommerce-profile-wizard__theme.woocommerce-card {
	overflow: hidden;

	@include breakpoint( '>782px' ) {
		margin: 0;
	}

	.woocommerce-card__body {
		padding: 0;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.woocommerce-profile-wizard__theme-image {
		width: 100%;
		height: 300px;
		background-size: cover;
	}

	.woocommerce-profile-wizard__theme-name {
		margin-top: auto;
		margin-bottom: $gap-smaller;
		@include font-size(24);
		font-weight: 400;

		svg {
			max-width: 18px;
			height: 18px;
			margin-left: $gap-smaller;

			path {
				fill: $studio-red-50;
			}
		}
	}

	.woocommerce-profile-wizard__theme-details {
		padding: $gap;
		display: flex;
		flex-direction: column;
		margin-top: auto;
	}

	.woocommerce-profile-wizard__theme-status {
		margin: 0;
		font-size: 14px;
	}

	.woocommerce-profile-wizard__theme-learn-more {
		display: inline-block;
	}

	.woocommerce-profile-wizard__theme-actions {
		button.components-button {
			margin-top: 13px;
			display: block;
			float: left;
			width: auto;
			min-width: 106px;
			height: 40px;
			line-height: 1;
			margin-right: $gap-smaller;
			box-shadow: none;

			&.is-default {
				border-color: $studio-pink-50;
				color: $studio-pink-50;
			}
		}
	}
}

.woocommerce-profile-wizard__body .woocommerce-theme-uploader.woocommerce-card {
	margin: 0;
	position: relative;

	.woocommerce-card__body {
		height: 100%;
	}

	&.is-uploading .components-drop-zone__provider {
		min-height: 382px;
	}

	.components-drop-zone__provider {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 2px;
		background: #f6f6f6;
		border: 1px dashed #b0b5b8;
	}

	.components-form-file-upload {
		flex: 1;
		width: 100%;
	}

	.components-form-file-upload > .components-button {
		flex: 1;
		flex-direction: column;
		justify-content: center;
		margin: 0;
		width: 100%;
		height: 100%;
		min-height: 380px;

		> .gridicon {
			width: 48px;
			height: 48px;

			path {
				fill: #50575d;
			}
		}

		.dashicons-upload {
			display: none;
		}
	}

	.woocommerce-theme-uploader__title {
		margin: $gap-smaller 0;
		@include font-size(24);
		font-weight: 400;
	}

	p {
		@include font-size(14);
		margin: 0;
	}
}

.woocommerce-theme-preview {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 100% !important;
	display: flex;
	flex-direction: column;

	.woocommerce-theme-preview__toolbar {
		background: $studio-white;
		flex-direction: row;
		display: flex;
		height: 56px;
		border-bottom: 1px solid $studio-gray-5;
		padding-left: $gap;
		padding-right: $gap;
		align-items: center;

		.muriel-button.is-button.is-primary {
			height: 40px;
			margin: 0;

			@include breakpoint( '<782px' ) {
				margin-left: auto;
			}
		}
	}

	.woocommerce-theme-preview__theme-name {
		padding-left: $gap;
		color: $studio-gray-90;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 50%;
	}

	.woocommerce-theme-preview__close {
		padding: 0 $gap 0 0;
		color: $studio-gray-50;
	}

	.woocommerce-theme-preview__devices {
		margin-left: auto;
		margin-right: $gap;

		.muriel-button {
			padding: $gap-small;
			color: $studio-gray-50;
			margin: 0;
			border-radius: 50%;

			&.is-selected,
			&:focus {
				background: $studio-gray-50;
				color: $studio-white;
			}
		}

		@include breakpoint( '<782px' ) {
			display: none;
		}
	}

	.woocommerce-web-preview {
		flex: 1;
		padding: $gap-largest $gap;
		overflow: scroll;

		.woocommerce-web-preview__iframe-wrapper {
			height: 100%;
			border-radius: 3px;
			box-shadow: $muriel-box-shadow-1dp;
			overflow: hidden;
			margin: 0 auto;

			iframe {
				display: block;
			}
		}

		&.is-mobile .woocommerce-web-preview__iframe-wrapper {
			max-width: 360px;
		}

		&.is-tablet .woocommerce-web-preview__iframe-wrapper {
			max-width: 768px;
		}

		&.is-desktop {
			width: 100%;
			padding: 0;

			.woocommerce-web-preview__iframe-wrapper {
				border-radius: 0;
				box-shadow: none;
			}
		}
	}
}

.woocommerce-theme-preview-active {
	overflow: hidden;

	.woocommerce-profile-wizard__header {
		display: none;
	}
}