/* wc.ui.panel.scss */
@import 'wc.ui.panel_vars.scss';

.panel[aria-busy='true'] {
	min-height: $line-size; // always allow room for a loading indicator
}

// The flowing divs in flowlayout and border layout. This is here for lame browsers and is rudimentary support only.
// The max-width is to ensure long non-wrapping content which has word-break applied (read-only input components) will
// honour that wrapping in a flow layout.
div {
	.flowLayout > &,
	.wc_borderLayout_middle > & {
		display: inline-block;
		max-width: 100%;
	}
}

// BORDER LAYOUT
.wc_borderLayout_middle {
	@include flex($justify: space-between);
	> div {
		@include flex-grow(1);
	}

	> .center {
		@include flex-grow(2);
		text-align: $preferred-alignment; // NOTE: the text align here is to overrule the generic .center class used in column alignment, table col alignment, flowLayout etc.

		&:first-child,
		&:last-child {
			@include flex-grow(3);
		}
	}

	> .east {
		@include flex-justify-content(flex-end);
		text-align: right;
	}
}


// FLOW LAYOUT
// flowLayout puts elements into a vertical or horizontal flow.
.flowLayout {
	@include flex($wrap: wrap, $justify: flex-start, $align-items: flex-start, $align-content: flex-start);

	&.baseline {
		@include flex-align-items(baseline);
	}

	&.bottom {
		@include flex-align-items(flex-end);
	}

	&.center {
		@include flex-justify-content(center);
		text-align: $preferred-alignment;
	}

	&.middle { // vertical align middle of the flow
		@include flex-align-items(center);
	}

	&.right {
		@include flex-justify-content(flex-end);
	}

	&.vertical {
		&,
		& > div {
			display: block;
		}
	}
}
/* end wc.ui.panel.scss */
