/* 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 'wc.ui.table_vars.scss';
@import 'mixins_common.scss';

.table.wc_error {
	@include outline($color: $wc-ui-color-error-fg, $offset: -1px);
}

table {
	@include border;
	border-collapse: collapse;
	border-spacing: 0;
	min-width: 100%;
}

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

thead {
	background-color: $wc-ui-color-table-head-bg;
	color: $wc-ui-color-table-head-fg;

	[disabled] {
		// override normal disabled state this important is needed to override the wc_btn_nada class
		// scss-lint:disable ImportantRule
		color: $wc-ui-color-table-head-disabled !important;
	}
}

tfoot {
	background-color: $wc-ui-color-table-foot-bg;
	color: $wc-ui-color-table-foot-fg;

	// Disabled overrides not really needed in tfoot as we do not use 'buttonless' buttons here.
	//[disabled] {
	//	color: $wc-ui-color-table-foot-disabled;
	//}
}

th,
td {
	padding: $table-cell-padding;
}

tbody {
	td,
	th {
		vertical-align: top;
	}
}

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

// differentiate the th from the td with these functional classes
//scss-lint:disable QualifyingElement
th.wc_table_rowexp_container,
th.wc_table_sel_wrapper { // reset the vertical alignment of th with these classes
	vertical-align: inherit;
}

.wc_table_colauto {
	max-width: $line-size;
	width: $line-size;
}

// 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.
col.wc_table_stripe,
tr.wc_table_stripe {
	background-color: $wc-ui-color-highlight-bg;
}
/* end wc.ui.table.scss */
