$root: ".woocommerce-setup-guide";

@import "~@wordpress/base-styles/variables";
@import "~@wordpress/base-styles/mixins";
@import "~@wordpress/base-styles/breakpoints";

// Adds animation to placeholder section
// Copied from WC-admin
// https://github.com/woocommerce/woocommerce-admin/blob/9f68059c7df466ee7a559c555bcb5a7b9e421e6d/packages/style-build/abstracts/_mixins.scss#L22-L35
@mixin placeholder( $lighten-percentage: 30% ) {
	animation: loading-fade 1.6s ease-in-out infinite;
	background-color: $gray-100;
	color: transparent;

	&::after {
		content: "\00a0";
	}

	@media screen and ( prefers-reduced-motion: reduce ) {
		animation: none;
	}
}

#{$root} {

	&__body {

		&.woocommerce-admin-full-screen {
			margin-top: 0;

			.woocommerce-layout__primary {
				margin-top: 60px;
			}

			.woocommerce-layout__header,
			.woocommerce-navigation {
				display: none;
			}

			.woocommerce-layout__main {

				.woocommerce-layout__header {
					top: 0;
					left: 0;
					width: 100%;
					display: block;
					border-bottom: 1px solid #dcdcde;
				}
			}
		}

		@media screen and (max-width: #{ ($break-small - 1) }) {

			#wpbody {
				padding-top: 0;
			}
		}

		.wrap {
			margin: 0;
		}

		#wpcontent {
			padding: 0;
		}

		.woocommerce-layout {

			&__main {
				display: block;
			}

			.woocommerce-spinner {
				display: none;
			}

			.woocommerce-list__item-content {
				white-space: break-spaces;
			}
		}

		#{$root} {

			&__main {

				.woocommerce-stepper {

					&__steps {
						align-items: center;
						display: flex;
						height: 60px;
						justify-content: center;
						margin: 0 auto;
						max-width: 850px;
						position: relative;

						&::before {
							background: #fff;
							border-bottom: 1px solid #dcdcde;
							content: "";
							display: block;
							height: 100%;
							left: 50%;
							position: absolute;
							top: 0;
							transform: translateX(-50%);
							width: 100vw;
							z-index: -1;
						}
					}

					&__step {
						padding-left: 12px;
						padding-right: 12px;

						&-divider {
							align-self: center;
							margin-top: 0;
						}
					}
				}
			}

			&__container {
				color: #000;
				max-width: 1032px;

				@include break-medium() {
					margin: var(--large-gap) auto;
					padding-left: 16px;
					padding-right: 16px;

				}

				> div {

					&:not(:first-child) {
						margin-top: calc(var(--large-gap) + (var(--main-gap) / 2));
					}
				}

				.components-card__body.is-size-large {
					padding: var(--large-gap);
				}

				.components-card__footer {
					padding-left: var(--large-gap);
					padding-right: var(--large-gap);
				}

				.components-button.is-link.is-destructive {
					color: #cc1818;

					&:hover:not(:disabled) {
						color: #710d0d;
					}
				}
			}

			&__step {

				&-header {
					margin: 16px auto 40px;
					max-width: 490px;
					text-align: center;

					@include break-medium() {
						margin: 0 auto var(--large-gap);
						min-height: 120px;
					}

					> div {
						margin: 12px 0;
					}

					&__subtitle {
						text-transform: uppercase;
					}

					&__description {
						color: #191e23;
					}
				}

				&-overview {
					margin-top: var(--large-gap);

					@include break-medium() {
						position: absolute;
					}

					> div {
						margin: 8px 0;
					}

					&__description {
						color: #191e23;
					}

					&__link {

						a {
							text-decoration: none;

							&:hover {
								text-decoration: underline;
							}
						}
					}
				}

				&-columns {

					@include break-medium() {
						column-gap: 24px;
						display: grid;
						grid-template-columns: 328px auto;
					}
				}

				&-column {
					position: relative;
					margin-bottom: var(--large-gap);

					@include break-medium() {
						margin-bottom: 0;
					}

					.woocommerce-spinner {
						display: block;
					}
				}

				&-modal {

					&__buttons {

						button + button {
							margin-left: 12px;
						}
					}
				}
			}

			&__setup-pins {

				.components-popover__content {
					width: 180px;
					white-space: normal;
					text-align: left;
					// `font-family` is overwritten when using dashicon as the hovering anchor.
					font-family: $default-font;
				}

			}

			&__setup-account {

				.connection-info {
					// Set minimum height to the height of the spinner preloader.
					min-height: 40px;

					.logo {
						display: flex;
						justify-self: start;
					}

					.connection-info__placeholder {

						@include placeholder();
						width: 50%;
						min-width: 10em;
						display: inline-block;
					}

					.connection-info__preloader {
						flex: 1;
					}

					.account-label {

						p {
							font-weight: 600;

							.account-type {
								font-weight: 400; // normal
							}
						}
					}
				}

				.business-connection {

					p {
						margin-bottom: 0.5em;

						&:last-child {
							margin-bottom: 0;
						}
					}
				}

				.components-flex {

					> * {
						margin: 0 6px;

						&:first-child {
							margin-left: 0;
						}

						&:last-child {
							margin-right: 0;
						}
					}
				}

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

					.components-input-control__container {
						margin-left: 0;
					}

					select.components-select-control__input {
						min-height: 36px;
					}
				}
			}

			&__claim-website {

				.components-card__body {

					> :not(:last-child) {
						margin-bottom: var(--main-gap);
					}

					> :first-child {
						margin-bottom: $grid-unit-10;
					}
				}

				.components-notice.is-error {
					margin: 0;
				}
			}

			&__setup-tracking {

				.text-margin {
					margin: 1em 0;
				}

				.components-base-control {

					&__help {
						margin: 0.2em 0 1.5em 0;
					}

					&:last-child .components-base-control {

						&__help {
							margin-bottom: 0;
						}
					}
				}
			}

			&__checkbox {

				&-heading {
					margin: 24px 0;

					&:first-child {
						margin-top: 0;
					}
				}

				&-group {
					align-items: center;
					display: flex;
					margin-bottom: 16px;

					&:last-child {
						margin-bottom: 0;
					}

					.components-base-control {

						&__field,
						&__help {
							margin: 0;
						}

						&__help {
							margin-left: 12px;

							.components-button {
								display: inline-block;
								text-decoration: none;

								&:not(:hover) {
									color: inherit;
								}
							}
						}
					}
				}
			}

			&__footer-button {
				display: block;
				margin-top: var(--large-gap);
				text-align: right;
			}
		}
	}
}

.pinterest-for-woocommerce-prelaunch-notice {
	max-width: 824px;
	margin: auto auto;
	padding: 1em 2em;
}

.pinterest-for-woocommerce-landing-page {
	max-width: 824px;
	margin: 24px auto;

	.components-flex {
		flex-direction: column;

		@include break-medium() {
			flex-direction: row;
		}
	}

	&__welcome-section {

		.components-flex {
			align-items: flex-end;

			@include break-medium() {
				padding-top: 36px;
			}

			&__block {
				margin: 0;

				&.content-block {
					padding: 20px 32px;
					flex: 0 0 50%;

					@include break-medium() {

						padding: 20px 64px 64px 64px;
					}

					p:not(:last-child) {
						margin-bottom: 16px;
					}
				}

				&.image-block {
					align-items: center;
					display: flex;
					margin-top: 32px;

					@include break-medium() {
						margin-top: 0;
					}

					img {
						height: 100%;
						object-fit: cover;
						width: 100%;
					}
				}
			}
		}
	}

	&__features-section {

		.components-flex {
			gap: 64px;
			padding: 32px;

			@include break-medium() {
				padding: 50px 64px;
			}

			&__block {
				text-align: center;
				margin: 0;

				img {
					border-radius: 100px;
					height: 100px;
					margin-bottom: 32px;
					object-fit: cover;
					width: 100px;
				}

				p:not(:last-child) {
					margin-bottom: 16px;
				}
			}
		}
	}

	&__faq-section {

		h2 {
			font-weight: 700;
		}
	}
}

.pinterest-for-woocommerce-catalog-sync {

	&__container {

		@include break-medium() {
			margin: var(--large-gap) auto;
		}
	}

	&__state {

		@media ( max-width: #{ ($break-medium - 1) } ) {

			tr {
				display: flex;
				flex-direction: column;
				padding-top: 10px;
				padding-bottom: 10px;
			}

			th {
				padding-bottom: 0;
			}

			th,
			td {
				padding-left: 0;
				padding-right: 0;
				border: 0;
			}
		}

		.woocommerce-table__header {
			display: none;
		}

		.components-card__footer {
			flex-direction: row;

			.components-external-link {
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		th:first-child {
			width: 1%;
			min-width: 175px;
			white-space: nowrap;

			.is-placeholder {
				max-width: 100%;
				width: 100%;
			}
		}

		td {
			color: #757575;

			.is-placeholder {
				max-width: 60%;
			}
		}

		.woocommerce-summary {
			background: none;
			border: 0;
			box-shadow: none;
			margin: 0;

			&__item {
				background: none;

				&-container {

					&:last-child {

						> div {
							border-right: 0;
						}
					}
				}

				&-delta {
					display: none;
				}
			}
		}

		svg.dashicon {
			margin-bottom: -5px;
		}
	}

	&__issues {

		&.woocommerce-card {
			border: 1px solid rgb(226, 228, 231);
			box-shadow: none;
		}

		.woocommerce-card {

			&__header {
				padding: 16px 24px;
				border-bottom: 1px solid rgb(226, 228, 231);
			}

			&__title {
				font-size: 20px;
				line-height: 28px;
			}

			&__body {
				padding: 0;
			}
		}

		th:first-child {
			text-align: center;
			white-space: nowrap;
			width: 1%;
		}
	}

	.error-text {

		color: #d63b44;

		svg {
			fill: #d63b44;
		}
	}

	.warning-text {

		color: #f0b849;

		svg {
			fill: #f0b849;
		}
	}

	.success-text {

		color: #23a713;

		svg {
			fill: #23a713;
		}
	}
}

.pinterest-for-woocommerce-settings-checkbox-disabled {
	color: $gray-700;
	pointer-events: none;
}