/* wc.ui.table.scss */
// This is the core of the table CSS. The other CSS files are used for functional images and other items which are less
// likely to be implementation specific
@import 'mixins-common';

table {
	@include border;
	@if ($wc-ui-color-table-bg != -1) {
		background-color: $wc-ui-color-table-bg;
	}
	border-collapse: collapse;
	border-spacing: 0;
	@if ($wc-ui-color-table-fg != -1) {
		color: $wc-ui-color-table-fg;
	}
	min-width: 100%;
}

// thead
@if ($wc-ui-color-table-head-bg != -1) {
	thead {
		background-color: $wc-ui-color-table-head-bg;

		&,
		.wc-nobutton,
		.wc-linkbutton,
		a,
		a:visited {
			color: $wc-ui-color-table-head-fg;
		}

		.wc-nobutton[disabled],
		.wc-nobutton[disabled],
		a[aria-disabled='true'] {
			color: $wc-ui-color-table-head-disabled;
		}

		.wc-submenu .wc-menuitem {
			color: $wc-ui-color-menu-fg;
		}
	}

	@if ($wc-ui-color-table-head-sorted-bg != 1) {
		th[sorted] { // the TH needs to be opague to over-ride the thead background color rather than over-lay it.
			background-color: $wc-ui-color-table-head-sorted-bg;

			&,
			.wc-nobutton,
			.wc-linkbutton,
			a,
			a:visited {
				color: $wc-ui-color-table-head-sorted-fg;
			}

			.wc-nobutton[disabled],
			.wc-nobutton[disabled],
			a[aria-disabled='true'] {
				color: $wc-ui-color-table-head-sorted-disabled-fg;
			}
		}
	}


	// Disabled th -
	// TODO: remove when WDataTable disabled is dropped.
	th[aria-disabled='true'] {
		color: $wc-ui-color-table-head-disabled;

		@if ($wc-ui-color-table-head-sorted-bg != -1) {
			&[sorted] {
				color: $wc-ui-color-table-head-sorted-disabled-fg;
			}
		}
	}
}

th,
td {
	padding: $wc-gap-small;
	text-align: left; // use TableColumn.Alignment to change this.
	vertical-align: top;
}


th {
	&.wc_table_rowexp_container,
	&.wc_table_sel_wrapper { // reset the vertical alignment of th with these classes
		vertical-align: inherit;
	}
}

td {
	&.wc_table_rowexp_container,
	&.wc_table_sel_wrapper {
		vertical-align: text-top;
	}
}

caption {
	padding: $wc-gap-normal 0;
	text-align: left;
}


// fix the layout of tables where column width is applied
.wc_table_fix {
	table-layout: fixed;
}

.wc_table_colauto {
	width: $wc-gap-normal; // actually anything small but more than zero.
}


//*****************************************************************************
// Container for controsl above the table
//*****************************************************************************
.wc_table_top_controls {
	@include flex($wrap: wrap, $justify: space-between, $align-items: baseline);
	margin-bottom: $wc-gap-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;
	}
}

//*****************************************************************************
// Container for actions and pagination
//*****************************************************************************
.wc_table_bottom_controls {
	padding: $wc-gap-small;

	// The control below the table
	@if ($wc-ui-color-table-foot-bg != -1) {
		background-color: $wc-ui-color-table-foot-bg;
		color: $wc-ui-color-table-foot-fg;
	}
}

//*****************************************************************************
// ACTIONS
//*****************************************************************************
.wc_table_actions button + button {
	margin-left: $wc-gap-small;
}

//*****************************************************************************
// Row selection
//*****************************************************************************
.wc_table_sel_wrapper {
	white-space: nowrap;

	tr[aria-selected] > &:before {
		@include wc-icon-fw($text-align: left);
	}

	.wc-menu-type-flyout {
		button { // override unnecessary .wc_seltog style.
			margin-left: 0;
			text-decoration: none;
		}

		.wc-submenu-o { // the is the submenu opener emulator for the sub-row toggle control
			@include button($background: $wc-ui-color-menu-bg, $padding: 0, $width: $wc-icon-normal);
			height: $wc-icon-normal;
			vertical-align: top;

			> .wc-decoratedlabel::after {
				display: inline-block;
				padding-left: 0; // remove submenu opener indicator margin
				width: $wc-icon-normal;
			}
		}
	}
}

//*****************************************************************************
// Row expansion
//*****************************************************************************
// The next lot does indentation of "child" rows
@for $i from 2 to 6 {
	[aria-level='#{$i}'] > .wc_table_rowexp_container {
		+ td,
		+ th {
			padding-left: ($i - 1) * $wc-gap-large;
		}
	}
}

[aria-expanded] > td[role='button']:before {
	@include wc-icon-fw;
}

//*****************************************************************************
// Pagination controls
//*****************************************************************************

.wc_table_pag_cont {
	> span,
	> label {
		margin-left: $wc-gap-large;
		white-space: nowrap;

		&:first-child {
			margin-left: 0;
		}
	}

	label > select {
		margin-left: $wc-gap-small;
	}

	button::before {
		min-width: $wc-icon-normal;
	}

	// This rule applies when the pagination controls are at the bottom of the table.
	.wc_table_bottom_controls > & {
		text-align: right;
	}
}

//*****************************************************************************
// Separators
//*****************************************************************************
.wc_table_rowsep > tr + tr {
	@include border($pos: top);
}

.wc_table_colsep {
	> col + col {
		@include border($pos: left);
	}

	> .wc_table_colauto { // The first col after the last auto generated col is the first data col and cannot have a left border
		@include border($pos: left, $width: 0);
	}
}

//*****************************************************************************
// Sort
//*****************************************************************************
th[aria-sort] {
	cursor: pointer;

	&:after {
		@include wc-icon-fw($text-align: right, $width: $wc-icon-small);
	}

	> .wc-decoratedlabel {
		display: inline-block;
		width: calc(100% - $wc-icon-small); // allow for sort icon
	}
}

// Sorted column
@if ($wc-ui-color-table-col-sorted-bg != 1) {
	.wc_table_sort_sorted {
		background-color: $wc-ui-color-table-col-sorted-bg;
	}
}

// Column Striping.
// Row striping: You'd think tr:nth-child(even) would be enough. You'd be wrong - that does not account for sub rows.
@if ($wc-ui-color-table-zebra-bg != -1) {
	.wc_table_stripe {
		background-color: $wc-ui-color-table-zebra-bg;
	}
}

@if ($wc-ui-color-table-invite-bg != -1) {
	// this only applies to rows with the invite class.
	// scss-lint:disable QualifyingElement
	tr.wc-invite {
		&:hover,
		&:focus {
			background-color: $wc-ui-color-table-invite-bg;
		}
	}
}


@include respond-phonelike {
	.wc-table.wc-respond {
		table,
		caption,
		thead,
		tfoot,
		tbody,
		tr,
		th,
		td {
			@include border-box;
			display: block;
			width: 100%;
		}

		caption {
			padding: $wc-gap-small 0;
		}

		tr {
			+ tr {
				@include border($pos: top);
			}

			+ tr[aria-level='1'],
			+ tr:not([aria-level]) {
				margin-top: $wc-gap-small;
			}
		}

		.wc_table_sel_wrapper,
		.wc_table_rowexp_container {
			display: none;
		}

		.wc_table_rowexp_container[role='button'] {
			display: inline-block;
			padding: $wc-gap-small 0;
			width: auto;

			+ .wc-th,
			+ .wc-td {
				display: inline-block;
				padding-left: 0;
				width: calc(100% - $wc-icon-normal);
			}
		}

		@for $i from 2 to 6 {
			[aria-level='#{$i}'] {
				padding-left: $i * $wc-gap-normal;

				th,
				td {
					padding-left: 0;
				}
			}
		}

		.wc_table_top_controls {
			@include flex-direction(column);

			> div {
				@include flex-shrink(1);

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

		tr[aria-selected='true'] {
			&,
			&.wc-invite:hover,
			&.wc-invite:focus {
				background-color: $wc-ui-color-selected-bg;
			}

			> th,
			> td {
				// WARNING: you _may_ want to add overrides for coloured elements eg, headings.
				&,
				a,
				a:visited,
				.wc-linkbutton {
					color: $wc-ui-color-selected-fg;
				}
			}
		}
	}
}

@import 'wc.ui.table.paginationIcons';
@import 'wc.ui.table.rowExpansionIcons';
@import 'wc.ui.table.rowSelectionIcons';
@import 'wc.ui.table.sortIcons';
