/* wc.ui.panel.header.scss */
// This contains CSS for WPanel Type.HEADER which is used to make the page header (role banner) and is most commonly
// over-ridden.
@import 'wc.ui.panel_vars.scss';

[role='banner'] {
	background-color: $wc-ui-color-panel-header-background;
	color: $wc-ui-color-panel-header-foreground;

	h1 {
		color: $wc-ui-color-panel-header-foreground;
		font-size: 3em;
		font-weight: lighter;
		margin: 0;
		padding: 0.25em 0.3333em;
	}

	a,
	a:visited {
		color: $wc-ui-color-panel-header-foreground;
	}
}

@include respond (mobile) {
	[role='banner'] {
		> .content {
			@include flex($direction: row-reverse, $wrap: wrap, $justify: space-between, $align-items: center, $align-content: flex-start);

			> * {
				@include flex-grow(0);
				@include flex-shrink(1);
				padding-left: $hgap-small;
			}

			> :last-child {
				padding-right: $hgap-small;
			}
		}

		h1 {
			font-size: 1.25em;
			font-weight: bold;
			margin: 0;
			padding: 0;
		}
	}
}
