@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';

.is-section-stepper,
.is-section-signup {
	.step-wrapper__navigation.action-buttons.no-sticky {
		height: 60px;
	}

	.domains__step-content {
		& .use-my-domain__page-heading {
			padding-left: 24px;
			padding-right: 24px;
			text-align: center;
		}

		& .use-my-domain,
		& .connect-domain-step,
		& .domain-transfer-or-connect__content {
			background: transparent;
			box-shadow: none;

			@include break-mobile {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}
}

body:has( .wpcom-domain-search-v2 ) {
	.step-wrapper__navigation.action-buttons.no-sticky {
		height: 60px;
	}

	.step-route.domains:has( .step-container ),
	.step-wrapper {
		padding-inline: 16px;

		@include break-small {
			padding-inline: 24px;
		}
	}

	.domains-mini-cart {
		@include break-small {
			padding-inline: 24px;
		}
	}

	.domains-mini-cart__content {
		max-width: 1040px;
	}

	&:has( .step-container-v2 ) {
		.domains-mini-cart {
			padding-inline: var( --step-container-v2-content-inline-padding );
		}

		.domains-mini-cart__content {
			max-width: var( --step-container-v2-content-row-max-width );
		}
	}

	.step-wrapper__navigation-link {
		color: #1d2327;
	}

	&:has( .site-domains-add-page ) {
		.domain-search__go-back {
			color: var( --studio-gray-50 );
			font-size: 0.875rem;
			line-height: 17px;
			text-decoration: none;
			margin-bottom: 18px;
		}

		@media ( max-width: #{$break-small} ) {
			.layout__content {
				padding-inline: 16px !important;
			}

			.new-domains-redirection-notice-upsell__banner {
				margin-bottom: 24px;
			}
		}

		@media ( max-width: #{$break-medium} ) {
			.formatted-header {
				margin-top: 0;
				margin-left: 0;
			}
		}

		.domains-mini-cart {
			@include break-large {
				padding-inline: 32px;
			}
		}

		&:not( .is-domain-plan-package-flow ) {
			.domains-mini-cart__container {
				@include break-medium {
					width: calc( 100% - var( --sidebar-width-min ) );
					left: var( --sidebar-width-min );
				}
			}
		}
	}
}
