/* Patterns - Content - Section */
////
/// @group Patterns-Section
/// Patterns - Content - Section

///
.section {
	&-title {
		background-color: transparent;
		border-bottom: var(--border-size-s) solid var(--color-neutral-4);
		color: var(--color-neutral-9);
		font-size: var(--font-size-h2);
		font-weight: var(--font-semi-bold);
		padding: var(--space-none) var(--space-none) var(--space-s) var(--space-none);
		position: relative;
		text-transform: none;
		width: 100%;
	}

	&-content {
		padding: var(--space-s) var(--space-none) var(--space-none);
	}

	&-group {
		&.is--sticky {
			.section-title {
				position: -webkit-sticky; //Fix for older iPhones
				position: sticky;
				top: calc(var(--section-top-position) + var(--os-safe-area-top));
				z-index: calc(var(--layer-below) + var(--layer-global-navigation));
			}
		}

		.section-title {
			background-color: var(--color-background-body);
		}
	}
}

///
.layout-native {
	.section {
		&-title {
			padding: var(--space-s) var(--space-base) var(--space-s) var(--space-base);
		}

		&-content {
			padding: 0;
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.android[data-status-bar-height] {
	.section-group {
		&.is--sticky {
			.section-title {
				top: calc(var(--section-top-position) + var(--status-bar-height));
			}
		}
	}
}

///
.ios[data-status-bar-height] {
	.section-group {
		&.is--sticky {
			.section-title {
				top: 0;
			}
		}
	}
}

///
.ios {
	.layout-native {
		.section-group {
			.sticky {
				position: static;
			}
		}
	}
}

///
.tablet {
	.section-title {
		font-size: calc(var(--font-size-h2) - 2px);
	}
}

///
.phone {
	.section-title {
		font-size: calc(var(--font-size-h2) - 4px);
	}
}