.section
	@extend .well-row

	&.nav-only
		padding-top: 0
		padding-bottom: 0

	&-has-nav
		padding-bottom: 0

	&-thin
		padding-top: ($grid-gutter-width / 2)
		padding-bottom: ($grid-gutter-width / 2)

		@media $media-xs
			padding-top: ($grid-gutter-width-xs / 2)
			padding-bottom: ($grid-gutter-width-xs / 2)

	/**
	 * Header section
	 */
	header&
		@extend .fill-gray
		padding-bottom: 0

		&.no-nav
			@extend .well-row

		h1
			margin-top: 0
			margin-bottom: 0

	/**
	 * Footer section
	 */
	footer&
		@extend .fill-darkest

.section-header
	margin-top: 0

.section-header-controls
	float: right

	h1.section-header &
		margin-top: 10px

	h2.section-header &
		margin-top: 5px

	> .button
		vertical-align: top !important

nav.section-nav
	margin-top: $line-height-computed * 2
	margin-bottom: 0 !important
