// Disable scroll when Site Picker is active. In future,
// the Site Picker's Site List could be made compatible
// SidebarScrollSynchronizer. Currently, it is not and
// sometimes fixed content gets rendered outside of the
// viewport. See `BodySectionCssClass` also.
body.is-focus-sites {
	overflow: hidden;
}

html.command-palette-modal-open {
	overflow: visible;
}
body.command-palette-modal-open {
	overflow: hidden;
}

/**
 * /*
 * 	Layout Elements
 * 	.layout__loading - Displays when loading Calypso
 * 	.layout__content - Contains primary and secondary elements
 * 		.layout__primary - Where the main content lives
 * 		.layout__secondary - Contains the site selector and sidebar elements
 * 			.sidebar
 * 			.site-selector
 *
 */

// Set transitons for layout elements
.layout__primary .main,
.layout__secondary,
.layout__secondary .sidebar,
.layout__secondary .site-selector {
	transition: transform 0.15s ease-in-out, opacity 0.15s ease-out;
}

.layout__header-section-content {
	box-sizing: border-box;
	padding: 79px 32px 32px 32px;

	@include breakpoint-deprecated( "<960px" ) {
		padding: 71px 24px 24px 24px;
	}
}

// Setup the content element to adapt to the sidebar,
// lack of sidebar, or the WebPreview component.
.layout__content {
	@include clear-fix;
	position: relative;
	margin: 0;
	padding: 79px 32px 32px calc(var(--sidebar-width-max) + 32px + 1px);
	box-sizing: border-box;
	overflow: hidden;

	// Various screens dont use a sidebar.
	.has-no-sidebar & {
		padding-left: 32px;
	}

	// Checkout sets it own padding/margin
	.is-section-checkout &,
	.is-section-checkout.has-no-sidebar & {
		padding: 0;
		margin: 0;
	}
	// Note that we have to use a 0,0,3,1 specificity selector to override the
	// one in `client/my-sites/sidebar/style.scss` which has 0,0,3,0 in case it
	// loads second, which happens if checkout is not the first page of calypso
	// to load.
	.theme-default.is-section-checkout div.is-section-checkout.focus-content & {
		padding: 0;
		margin: 0;
	}

	// Themes sets its own padding/margin when there is no sidebar
	.is-section-theme.has-no-sidebar &,
	.is-section-themes.has-no-sidebar &,
	.theme-default .layout.is-section-theme.has-no-sidebar &,
	.theme-default .layout.is-section-themes.has-no-sidebar &,
	.theme-default .layout.is-section-themes:not(.is-logged-in) & {
		padding: 0;
		margin: 0;
	}

	.is-section-marketplace.has-no-sidebar & {
		padding: 0;
		margin: 0;
	}

	.is-section-theme & {
		.sites.main {
			padding-top: calc(79px - var(--masterbar-height));
		}
	}

	.is-section-plugins.is-logged-in & {
		// The plugins site view needs the header to be full width, so the padding
		// is added on the header and .plugins-browser__content-wrapper instead
		padding: 47px 0 32px calc(var(--sidebar-width-max) + 1px);
	}

	.is-section-plugins.is-logged-in.has-no-sidebar & {
		padding: 79px 32px 32px;
	}

	// Tablets
	@include breakpoint-deprecated( "<960px" ) {
		padding: 71px 24px 24px calc(var(--sidebar-width-min) + 24px + 1px);

		.has-no-sidebar & {
			padding-left: 24px;
		}

		.is-section-theme.has-no-sidebar &,
		.is-section-themes.has-no-sidebar & {
			padding: 0;
			margin: 0;
		}

		.is-section-themes.has-no-sidebar.is-logged-in & {
			padding: 47px 0 0;
		}

		.is-section-plugins.has-no-sidebar.is-logged-in & {
			padding: 71px 24px 24px;
		}
	}

	// Mobile (Full Width)
	@include breakpoint-deprecated( "<660px" ) {
		margin-left: 0;
		padding: 0;
		padding-top: calc(var(--masterbar-height) + 1px);

		.has-no-sidebar & {
			padding-left: 0;
		}

		.is-section-plugins.has-no-sidebar.is-logged-in & {
			padding: calc(var(--masterbar-height) + 1px) 0 0;
		}
	}
}

// Add extra bottom padding for smaller screens to prevent
// floating inline help from overlapping content.
.layout__primary .main {
	// The height is set to 100% in /sites page so we want to ensure that padding doesn't take us over 100% total height.
	box-sizing: border-box;
	padding-bottom: 88px;
	@include breakpoint-deprecated( ">1400px" ) {
		padding-bottom: 0;
	}
}
body.is-mobile-app-view {
	/* We are ignoring these lines because without the px value the calc function does not work as expected */
	/* stylelint-disable length-zero-no-unit */
	--sidebar-width-max: 0px;
	--sidebar-width-min: 0px;
	/* stylelint-enable length-zero-no-unit */
	.layout__secondary {
		display: none;
	}
}
// Setup the secondary element, which contains the sidebar and
// the site-selector elements.
.layout__secondary {
	position: fixed;
	top: var(--masterbar-height);
	left: 0;
	bottom: 0;
	color: var(--color-sidebar-text);
	background: var(--color-sidebar-background);
	width: var(--sidebar-width-max);
	overflow: hidden;
	// Ensure that the sidebar always remains on top.
	// Related issue: https://github.com/Automattic/wp-calypso/issues/53504
	z-index: z-index("root", ".layout__secondary");

	@include breakpoint-deprecated( "<960px" ) {
		width: var(--sidebar-width-min);
	}

	@include breakpoint-deprecated( "<660px" ) {
		width: 100%;
	}

	// The editor has its own sidebar which doesnt
	// use the secondary element.
	.is-section-gutenberg-editor &,
	// Some screens (like /theme/) simply dont have
	// a sidebar.
	.has-no-sidebar & {
		display: none;
	}

	// Secondary Layout overrides
	.site__title {
		color: var(--color-sidebar-text);
	}

	.site__domain {
		color: var(--color-sidebar-text-alternative);
	}

	.site__title::after,
	.site__domain::after {
		@include long-content-fade( $color: var( --color-sidebar-background ) );
	}

	.site-selector {
		// Setup the site-selector element. Its default
		// position is off screen.
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;
		transform: translateX(calc(-1 * var(--sidebar-width-max)));
		height: calc(100vh - var(--masterbar-height));

		&.is-large .site-selector__sites {
			border-color: var(--color-sidebar-border);
		}

		&__sites {
			background: var(--color-sidebar-background);
		}

		&__add-new-site {
			border-color: var(--color-sidebar-border);

			.button {
				color: var(--color-sidebar-text-alternative);
				&:hover {
					color: var(--color-sidebar-text);
				}
			}
		}

		&__recent {
			border-color: var(--color-sidebar-border);
		}

		&__no-results {
			color: var(--color-sidebar-text-alternative);
		}

		&__list-bottom-adornment {
			color: var(--color-sidebar-text);
		}

		.all-sites {
			border-color: var(--color-sidebar-border);
		}

		.site,
		.all-sites {
			.site__title,
			.site__domain {
				&::after {
					@include long-content-fade( $color: var( --color-sidebar-background ) );
				}
			}
		}

		@include breakpoint-deprecated( "<660px" ) {
			-webkit-overflow-scrolling: touch;
			transform: translateX(-100%);
			height: auto;
		}
	}

	.all-sites .count {
		color: var(--color-sidebar-text);
		border-color: var(--color-sidebar-text);
	}

	.app-promo {
		box-shadow: 0 0 0 1px var(--color-sidebar-border), 0 1px 2px var(--color-sidebar-border);
	}
}

/*
	Focus States
	Sites - Site Selector for those with multiple sites
	Sidebar - The sidebar is the current focus
	Content - The content is the furrent focus
*/

// Adjust the content as needed when focused on the site selector or sidebar.
.layout.focus-sites,
.layout.focus-sidebar {
	.layout__primary .main {
		@include breakpoint-deprecated( "<660px" ) {
			pointer-events: none;
			overflow: hidden;
			max-height: calc(100vh - 47px);

			// Removing this transform could have unintended side-affects
			// related to z-index and elements showing through on mobile.
			transform: translateX(100%);
		}
	}
}

// Adjust elements when the site-selector is visible.
.layout.focus-sites {
	.layout__secondary .site-selector {
		pointer-events: auto;
		transform: translateX(0);
	}

	.layout__secondary .sidebar {
		pointer-events: none;
		transform: translateX(var(--sidebar-width-max));

		@include breakpoint-deprecated( "<660px" ) {
			transform: translateX(100%);
		}
	}

	.layout__primary .main {
		@include breakpoint-deprecated( ">660px" ) {
			pointer-events: none;
			opacity: 0.25;
		}
	}
}

// Move the secondary element off screen when focused
// on the content. This only applies to small screens.
.layout.focus-content .layout__secondary {
	@media only screen and (max-width: 781px) {
		transform: translateX(-100%);
	}
}

// Display sidebar as a panel under a main payment component in mobile checkout
.layout.is-section-checkout {
	@include breakpoint-deprecated( "<660px" ) {
		.layout__content {
			display: flex;
			flex-flow: column;
		}
		.layout__primary {
			order: 1;
		}
		.layout__secondary {
			order: 2;
			position: relative;
			transform: none;
			top: 10px;
		}
	}
}

.layout {
	.global-notices {
		padding: 8px;

		/* This is the breakpoint we're using in client/components/global-notices/style.scss */
		@include breakpoint-deprecated( ">660px" ) {
			padding: 0;
		}
	}

	// Try to clean things up a bit when printing.
	.masterbar,
	.layout__secondary {
		@media print {
			display: none;
		}
	}

	.layout__content {
		@media print {
			padding: 0;
		}
	}
}
// Only apply the no-masterbar rule to logged in sections
// This is done since most has-no-masterbar section have their own padding set already that we don't want to overwrite
.layout.has-no-masterbar.is-group-me,
.layout.has-no-masterbar.is-group-sites,
.layout.has-no-masterbar.is-section-reader {
	/* We are ignoring these lines because without the px value the calc function does not work as expected */
	/* stylelint-disable-next-line length-zero-no-unit */
	--masterbar-height: 0px;

	.layout__content {
		padding-top: 32px;
	}
	&.has-no-sidebar .layout__content {
		padding-top: 0;
	}
}

// Ensure sidebar is visually separate from the content in the Contrast color scheme
.theme-default.is-contrast {
	.layout__secondary {
		outline: 1px solid var(--color-sidebar-border);
	}
}

// Ensure reader streams have the neutral background.
.layout.is-section-reader {
	min-height: 100vh;

	&.has-header-section {
		background: var(--studio-white);
	}
	.section-header.card {
		box-shadow: none;
		margin-bottom: 24px;
		padding: 0;

		.section-header__label-text {
			font-size: 1.25rem;
			font-weight: 500;
			line-height: 26px;
		}

		@include breakpoint-deprecated( "<660px" ) {
			margin: 0 16px;
		}
	}
}

// Handle Gravatar domain flow styles
.layout.is-domain-for-gravatar {
	* {
		font-family:
			'SF Pro Text',
			-apple-system,
			BlinkMacSystemFont,
			'Segoe UI',
			Roboto,
			Oxygen-Sans,
			Ubuntu,
			Cantarell,
			'Helvetica Neue',
			sans-serif !important;
	}

	.masterbar__secure-checkout {
		column-gap: 8px;
	}

	.gravatar-text-logo {
		width: 119px;
		height: 22px;
	}

	h1.formatted-header__title,
	.checkout-title,
	h1.thank-you__header-title {
		font-family:
			'SF Pro Display',
			-apple-system,
			BlinkMacSystemFont,
			'Segoe UI',
			Roboto,
			Oxygen-Sans,
			Ubuntu,
			Cantarell,
			'Helvetica Neue',
			sans-serif !important;
	}

	h1.formatted-header__title,
	h1.thank-you__header-title {
		font-weight: 700 !important;
	}

	.domain-suggestion__action.is-primary:not( :disabled ),
	.checkout-modal__button.is-status-primary,
	.thank-you__product-actions .components-button.is-primary:not( :disabled ) {
		background-color: #1d4fc4;
		border-color: #1d4fc4;

		&:hover,
		&:focus {
			background-color: #002e9b;
			border-color: #002e9b;
		}
	}

	// Domain pages
	&.is-section-signup {
		.gravatar-text-logo {
			position: absolute;
			top: 20px;
			left: 24px;
			width: 130px;
			height: 24px;
		}
	}

	&.is-section-checkout,
	&.is-section-checkout-pending {
		.gravatar-text-logo {
			margin-bottom: 3px;
		}
	}

	&.is-section-checkout {
		.cost-overrides-list-item__reason--is-discount {
			color: #1d4fc4;;
		}

		.checkout-payment-methods .is-checked:not( .has-highlight ) {
			border: #c3c4c7 1px solid;
		}
	}

	&.is-section-checkout-pending {
		.gravatar-text-logo {
			margin-left: 19.5px;
		}
	}

	&.is-section-checkout-thank-you {
		.gravatar-text-logo {
			margin-left: 24px;
			align-self: center;
		}
	}
}

// Universal header
.layout.has-universal-header .lpc-header-nav-wrapper {
	padding-top: var(--masterbar-height);
}
