@import 'mixins_common.scss';

// the negative margin must be 0 - the padding of WSection.content which must equal
$neg-margin: -$section-content-spacing;

section {
	@include border;

	// 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: $section-header-spacing;
		}

		> h1 {
			margin: 0;
			width: 100%;
		}

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

	// WPanel types CHROME and ACTION
	> h1 {
		margin: 0;
		padding: $section-header-spacing;
	}

	// now the content
	// All
	> .content {
		padding: $section-content-spacing;
	}

	// WPanel layouts
	> .listLayout { // we need to fix the listLayout default margin
		&,
		&.none,
		&.flat,
		&.bar { // need to make these a bit more specific to override the double class in wc.ui.listLayout.scss
			margin: $section-content-spacing;
		}

		&.dot { // dotted lists need some more left margin
			margin-left: $list-layout-dot-spacing + $section-content-spacing;

			&.flat { //except when they are flat
				margin-left: $section-content-spacing;
			}
		}
	}

	// We need to reset the margin-left if the list is ordered so we need element qualifier for ordered lists only
	// scss-lint:disable QualifyingElement
	> ol.listLayout {
		margin-left: $list-layout-ordered-spacing + $section-content-spacing;

		&.flat { //except when they are flat
			margin-left: $section-content-spacing;
		}
	}
	//scss-lint:enable QualifyingElement
}

// 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.
.section > .content > .panel, //we use the WSection class here so we do not end up with weird multi-depth happenings.
.chrome,
.action {
	// need these deep selectors unfortunately
	// scss-lint:disable SelectorDepth
	> .content > .bar:first-child {
		margin: $neg-margin $neg-margin $section-content-spacing;
	}
	// scss-lint:enable SelectorDepth
}
