/* Page Layout - Layout Native - Header */
////
/// @group Layout-Native-Header
/// Page Layout - Layout Native - Header

///
.layout-native {
	&.hide-header-on-scroll .header {
		top: calc(-1 * (var(--header-size) + var(--os-safe-area-top)));
	}

	.header {
		position: -webkit-sticky; //Fix for older iPhones
		position: sticky;
		top: 0;

		&-top {
			padding: 0 var(--space-l);
		}

		&-title {
			font-size: var(--font-size-h5);
			font-weight: var(--font-regular);

			// Service Studio Preview
			& {
				-servicestudio-text-align: center;
				-servicestudio-width: 100%;
			}
		}

		&-left {
			flex: 1;
			margin-right: var(--space-base);
		}

		&-right {
			display: flex;
			flex: 1;
			justify-content: flex-end;
			margin-left: var(--space-base);
			margin-right: auto;

			// ServiceStudio Preview
			& {
				-servicestudio-min-width: fit-content;
			}
		}
	}

	h1.header-title {
		// Service Studio Preview
		& {
			-servicestudio-text-align: center;
			-servicestudio-width: 100%;
		}
	}

	.content-bottom {
		bottom: 0;
		position: -webkit-sticky; //Fix for older iPhones
		position: sticky;
		z-index: var(--layer-global-navigation);
	}

	.menu-icon {
		margin-right: 0;
	}
}

///
.landscape {
	.layout.layout-native {
		.header,
		&:not(.blank) .main-content,
		.bottom-bar-wrapper {
			padding-left: var(--os-safe-area-left);
			padding-right: var(--os-safe-area-right);
		}

		.app-menu {
			padding-bottom: var(--os-safe-area-bottom);
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.tablet,
.phone {
	.layout-native {
		.header-top {
			padding: 0 var(--space-m);
		}
	}
}

///
.tablet {
	.layout-native {
		.header-title {
			font-size: calc(var(--font-size-h5) - 1px);
		}
	}
}

///
.phone {
	.layout-native {
		.header-title {
			font-size: calc(var(--font-size-h5) - 2px);
		}
	}
}

///
.android {
	&[data-status-bar-height] {
		.layout-native {
			&.hide-header-on-scroll .header {
				top: calc(-1 * (var(--header-size) + var(--status-bar-height)));
			}

			.header,
			.app-menu {
				padding-top: var(--status-bar-height);
			}
		}
	}
}

///
.ios {
	.layout-native .header {
		padding-top: var(--os-safe-area-top);
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.layout-native {
		.header-left {
			margin-left: var(--space-base);
			margin-right: 0;
		}

		.header-right {
			margin-left: auto;
			margin-right: var(--space-base);
		}
	}
}