/* wc.ui.panel.scss */
@import 'mixins-common';
// Type.ACTION
@import 'wc.ui.panel.action';
// Also see wc.common.section

// Type.BLOCK
// If you are reading this with knowledge of HTML and CSS you are possibly thinking, 'divs are blocks so surely WPanel
// type 'block' should do nothing?' But that would be too easy. A WPanel with no type is just a container. Type
// BLOCK does (according to the javadoc): 'A 'block' type panel has padding around the edges.'
.wc-panel-type-block {
	padding: $wc-gap-normal;
}

// Type.BOX:
// 'A box panel has a border.' It has a pad to remove the content from the border.
.wc-panel-type-box,
.wc-panel-type-feature,
footer {
	@include padded-box;
}

// Type.CHROME
@import 'wc.ui.panel.chrome';
// Also see wc.common.section

// Type.FEATURE
// 'The feature panel is highlighted by a background colour and border.'
// The colours can be omitted by setting $wc-ui-color-panel-feature-foreground to -1
@if ($wc-ui-color-panel-feature-foreground != -1) {
	.wc-panel-type-feature {
		background-color: $wc-ui-color-panel-feature-background;
		color: $wc-ui-color-panel-feature-foreground;
	}
}

// Type.FOOTER
@if ($wc-ui-color-panel-footer-foreground != -1) {
	footer {
		background-color: $wc-ui-color-panel-footer-background;
		color: $wc-ui-color-panel-footer-foreground;
	}
}

// Type HEADER
@import 'wc.ui.panel.header';

// Reduce padded panels on narrow viewports.
@if ($wc-gap-reduce-when-narrow != -1) {
	@include respond-phonelike {
		.wc-panel-type-block,
		.wc-panel-type-box,
		.wc-panel-type-feature,
		footer {
			padding: $wc-phone-gap-normal;
		}
	}
}

// WPanel layouts
// BorderLayout
@import 'wc.ui.borderLayout';
// ColumnLayout
@import 'wc.common.rowColumn';
// FlowLayout
@import 'wc.ui.flowLayout';
// GridLayout
@import 'wc.ui.gridLayout';
// ListLayout
@import 'wc.ui.listLayout';
// Cells in all except BorderLayout
@import 'wc.common.cell';
