@import 'mixins-common';

section {
	@include border;

	> h1,
	> header h1 {
		@include margin($size: 0);
		font-size: $wc-section-header-size;
		font-weight: normal;
	}

	// First the header. There are two options. a header element for WSection, a H1 for WPanel
	// WSection
	> header {
		display: table;
		width: 100%;

		> .wc_dlbl_seg {
			display: table-cell;
			padding: $wc-gap-normal;
		}

		> h1 {
			width: 100%;
		}

		> div {
			white-space: nowrap;
			width: 0;
		}
	}

	// WPanel types CHROME and ACTION
	> h1 {
		padding: $wc-gap-normal;
	}

	// now the content
	// WSection is easy: its content is a wpanel.
	> .wc-panel {
		margin: $wc-gap-normal;
		padding: 0;
	}

	// WPanel content and layouts.
	> div, // the WPanel child of WSection is a div but the rule above overrides this.
	> .wc-listlayout {
		padding: $wc-gap-normal;
	}

	// Docking a Bar menu
	// If you have a WPanel of type CHROME or ACTION or a WSection containing a plain WPanel
	// and the WPanel does not have a layout then add a WMenu Type BAR to the content of the
	// WPanel then we can 'dock' the menu to the panel/section header.
	&,
	> .wc-panel {
		> .wc-content > .wc-menu-type-bar:first-child {
			// the negative margin must be 0 - the padding of WSection content.
			$neg-margin: -$wc-gap-normal;
			margin: $neg-margin $neg-margin $wc-gap-normal;
		}
	}
}
