style.scss

$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;
	}
}

// This is to fix breaking changes in checkbox control UI in WP 6.6.
// Code is copied from https://github.com/WordPress/gutenberg/pull/60475.
:root {
	--checkbox-input-size: 24px; // Width & height for small viewports.

	@include break-small() {
		--checkbox-input-size: 20px;
	}

	--checkbox-input-margin: #{$grid-unit-10};
}

#{$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;
			}
		}

		.pinterest-for-woocommerce-connection,
		.pinterest-for-woocommerce-settings,
		.pinterest-for-woocommerce-catalog,
		.pinterest-for-woocommerce-setup-guide {
			#{$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;
								flex-grow: 0;
								width: 100px;
							}
						}
					}
				}

				&__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;
						}
					}

					.pinterest-for-woocommerce-sync-settings .woocommerce-spinner {
						display: block;
						margin: auto;
						width: 15px;
						min-width: 15px;
						height: 15px;
					}
				}

				&__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);

						> 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;
						}

						.pinterest-tooltip-link {
							color: #fff;
						}
					}

					&-modal {

						&__buttons {

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

				&__ad-credits {

					&__divider {
						margin: 20px 0;
					}

					.image-block {
						align-items: center;
						display: flex;
						flex: 0 0 32px;

						svg {
							height: 100%;
							width: 100%;
						}
					}

					.content-block {
						color: #757575;
					}
				}

				&__setup-pins {

					.components-tooltip {
						background: unset;
						padding: 0;

						.components-popover__content {
							background: #000;
							border-radius: 2px;
							border-width: 0;
							box-shadow: none;
							color: #f0f0f0;
							font-size: 12px;
							line-height: 1.4;
							outline: none;
							padding: 4px 8px;

							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;
									}
								}
							}
						}
					}

					&-readonly {

						.components-base-control__field {
							color: $gray-700;
							pointer-events: none;
						}
					}
				}

				&__with-help-description {
					margin-bottom: 6px;
				}

				&__help-description {
					color: $gray-700;
					margin-bottom: 16px;
				}

				&__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%;
					}
				}
			}
		}
	}

	&__credits-section {

		.components-flex {
			padding: 20px 64px;

			&__block {
				margin: 0;

				&.content-block {
					flex: 0 0 85%;

					@include break-medium() {
						padding-left: 20px;
					}
				}

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

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

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

		&__tac-modal {
			width: 600px;

			.components-modal__header {
				border-bottom: 1px solid #ddd;
			}

			a,
			p {

				display: block;
				margin-bottom: 16px;
			}
		}
	}

	&__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 {

		margin-bottom: 0;

		@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;
		}

		& &-footer {
			flex-direction: column;
			align-items: flex-start;

			&-credits {
				color: #757575;
			}
		}

	}

	&__ad-credits {
		flex-direction: row;
		margin: 0;
		padding: 16px 20px;

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

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

		&__icon {
			margin-right: 8px;

			> * {
				stroke: #000;
			}
		}

		.components-notice__content {
			display: flex;
			justify-items: flex-start;

			.components-visually-hidden {
				display: none;
			}
		}
	}

	&__issues {

		margin-top: 40px;

		&.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%;
		}
	}

	&__onboarding-modal,
	&__onboarding-generic-modal {

		width: 500px;

		.components-modal {

			&__content {

				margin-top: 160px;

				.components-modal__header {
					align-items: flex-start;
					height: 160px;

					img {
						height: 160px;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
					}

					button {
						margin-top: 15px;
					}
				}
			}
		}

		p {
			margin-bottom: 16px;

			&:not(:nth-of-type(1)) {
				color: #757575;
			}
		}

		& &__error {
			align-items: flex-start;
			color: #757575;

			.dashicon {
				color: #f0b849;
				font-size: 24px;
			}
		}
	}

	.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;
}

.pinterest-for-woocommerce-account-setup .woocommerce-setup-guide__ad-credits {
	align-items: flex-start;
}