// additionalData in webpack.config.js is for entry points only. Partials still need to import the use manually.
@use "@wordpress/base-styles/colors" as wpColors;
@use "@wordpress/base-styles/breakpoints" as wpBreakpoints;
@use "@wordpress/base-styles/variables" as wpVariables;

.woocommerce-admin-page__reddit_settings #wpbody {
	margin-top: 60px !important;
}

// Used in ~/hooks/useLayout.js
.rfw-full-content {
	.woocommerce-layout {
		padding-top: 0;

		.woocommerce-layout__header {
			display: none;
		}

		// Hide StoreAlerts.
		.woocommerce-store-alerts,
		.woocommerce-layout__notice-list {
			display: none;
		}
		.woocommerce-layout__primary {
			margin: 0;

			.woocommerce-layout__main {
				padding: 0;
			}
		}
	}
}

// Used in ~/hooks/useLayout.js
.rfw-full-page {
	// hack to fix the margin-top when width is between 600px and 782px.
	// without this, the margin-top would be -32px,
	// and there would be a visible small grey gap.
	&.is-wp-toolbar-disabled {
		@media (min-width: #{ (wpBreakpoints.$break-small) }) and (max-width: #{ (wpBreakpoints.$break-medium) }) {
			margin-top: -46px;
		}
	}

	.woocommerce-layout {
		padding-top: 0;

		.woocommerce-layout__primary {
			margin: 0;

			.woocommerce-layout__main {
				padding: 0;
			}
		}
	}
}

// rfw-admin-page is for scoping particular styles to WP/WC core components in a SFW admin page.
// If a style is expected to apply to a WC core component as its base style across SFW admin pages,
// it's preferred to add them here.
.rfw-admin-page {
	.woocommerce-stepper {
		.woocommerce-stepper__steps {
			align-items: center;
			justify-content: center;
			height: wpVariables.$grid-unit-40 * 2;
			background-color: wpColors.$white;
			box-shadow: inset 0 -1px 0 wpColors.$gray-400;
			margin-bottom: 0;

			.woocommerce-stepper__step-divider {
				margin-top: 0;
				align-self: auto;
				max-width: wpVariables.$grid-unit-60;
			}
		}
	}

	.components-notice:not(.app-notice) {
		margin-bottom: wpVariables.$grid-unit-15;
	}
}

// compatibility-code "WC >= 7.3" -- adding margin in the first question label.
.wp-admin .woocommerce-customer-effort-score__intro {
	margin-bottom: 1em;
}
