/* Page Layout - iOS Scroll Bounce */
////
/// @group Layout-iOS_ScrollBounce
/// Page Layout - iOS Scroll Bounce

///
.ios {
	.layout-native {
		&.ios-bounce {
			&:not(.hide-header-on-scroll) {
				.main {
					display: grid;
					grid-template: auto 1fr auto / 1fr;
					grid-template-areas: 'header' 'content' 'footer';
					max-height: var(--viewport-height, 100vh);
					width: 100%;

					// Service Studio Preview
					& {
						-servicestudio-max-height: 100% !important;
					}
				}

				.header {
					grid-area: header;
					position: relative;
				}

				[data-block='Private.PullToRefresh'] {
					display: contents;
				}

				.pull-to-refresh {
					top: calc(var(--header-size) + var(--header-size-content) + var(--os-safe-area-top));
				}

				.content {
					background-color: var(--color-background-body);
					grid-area: content;
					overflow-x: hidden;
					overflow-y: auto;

					&-bottom {
						grid-area: footer;
						position: relative;
					}
				}
			}
		}
	}
}