/* wc.ui.table.topControls.scss */
@import 'mixins-common';

.wc_table_top_controls {
	@include flex($wrap: wrap, $justify: space-between, $align-items: baseline); // ($direction: row, $wrap: nowrap, $justify: flex-start, $align-items: stretch, $align-content: stretch)
	margin-bottom: $hgap-small;

	> div {
		@include flex-grow(1);
		display: inline-block;

		&:last-child {
			@include flex-justify-content(flex-end);
			text-align: right;
		}
	}

	// do not use > div:first-child:last-child as we want the pagination and expand controls on the right if they
	// are last even if they are first. Instead make the selection controls left aligned if they are last.
	> .wc_table_sel_cont:last-child {
		@include flex-justify-content(flex-start); //always put the selection controls at the start
		text-align: left;
	}
}

@include respond(small) {
	.wc_table_top_controls {
		display: block;

		> div {
			display: block;
			text-align: left;
			width: 100%;

			+ div {
				margin-top: $hgap-small;
			}
		}

		> .wc_table_exp_cont {
			text-align: left;
		}
	}
}
