th {
	height: 20px;
	text-align: left;
}

caption {
	caption-side: top;
}

.table-head-title {
	.inline-item-before {
		margin-right: $table-head-title-inline-item-spacer-x;

		+ .text-truncate-inline {
			max-width: $table-head-title-text-truncate-max-width;
		}
	}

	.inline-item-after {
		margin-left: $table-head-title-inline-item-spacer-x;
	}
}

.table {
	font-size: $table-font-size;
	margin-bottom: $table-margin-bottom;

	thead {
		td,
		th {
			// Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
			background-color: $table-head-bg;
			border-bottom-width: $table-head-border-bottom-width;
			border-top-width: $table-head-border-top-width;
		}

		th a {
			@include clay-link($table-head-link);
		}
	}

	th {
		background-clip: padding-box;
		color: $table-head-color;
		font-size: $table-head-font-size;
		font-weight: $table-head-font-weight;
		height: $table-head-height;
		position: relative;
	}

	td {
		background-clip: padding-box;
		border-bottom-width: $table-data-border-bottom-width;
		border-left-width: $table-data-border-left-width;
		border-right-width: $table-data-border-right-width;
		border-top-width: $table-data-border-top-width;

		border-color: $table-data-border-color;
		border-style: $table-data-border-style;
		position: relative;
		vertical-align: $table-data-vertical-align;
	}

	td:first-child,
	th:first-child,
	.table-cell-start {
		padding-left: $table-cell-gutters;
	}

	td:last-child,
	th:last-child,
	.table-cell-end {
		padding-right: $table-cell-gutters;
	}

	tbody,
	tfoot {
		td,
		th {
			// Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
			background-color: $table-bg;
		}
	}

	.autofit-col {
		justify-content: center;
		padding-left: $table-cell-padding;
		padding-right: $table-cell-padding;

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

		&:last-child {
			padding-right: 0;
		}
	}

	.custom-control,
	.form-check {
		margin-bottom: 0;
	}
}

.table-column-text-start {
	text-align: left;
}

.table-column-text-center {
	text-align: center;
}

.table-column-text-end {
	text-align: right;
}

%table-cell-expand {
	display: table-cell;
	max-width: $table-cell-expand-min-width;
	min-width: $table-cell-expand-min-width;
	width: auto;
	word-wrap: break-word;
}

%table-cell-contract {
	display: table-cell;
	width: 1%;
}

// Table Bordered

.table-bordered {
	thead {
		td,
		th {
			@if ($table-head-border-top-width == 0 and $table-head-border-top-width) {
				border-top-width: $table-border-width;
			}
		}
	}

	td,
	th {
		border-width: $table-bordered-border-width;
	}
}

// Table Striped

.table-striped {
	tbody tr:nth-of-type(#{$table-striped-order}) {
		&,
		td,
		th {
			background-color: $table-accent-bg;
		}
	}
}

// Table Hover

.table-hover {
	tbody tr {
		&:hover {
			&,
			td,
			th {
				background-color: $table-hover-bg;
			}
		}
	}
}

// Table Active

.table .table-active {
	&,
	> td,
	> th {
		background-color: $table-active-bg;
	}
}

// Table Disabled

.table-disabled {
	background-color: $table-disabled-bg;
	color: $table-disabled-color;

	> td,
	> th {
		background-color: $table-disabled-bg;
		cursor: $table-disabled-cursor;

		a {
			color: $table-disabled-color;
			pointer-events: $table-disabled-pointer-events;
		}
	}

	.table-title,
	.table-list-title {
		color: $table-disabled-color;
	}
}

.table-hover .table-disabled:hover {
	&,
	> td,
	> th {
		background-color: $table-disabled-bg;
	}
}

.table-striped {
	tbody .table-disabled:nth-of-type(#{$table-striped-order}) {
		&,
		td,
		th {
			background-color: $table-disabled-bg;
		}
	}
}

// Table Title

.table-title {
	@include clay-text-typography($table-title);
}

.table-title a {
	@include clay-link($table-title-link);
}

// Table Link

.table-link {
	@include clay-link($table-link);
}

// Table Action Link

.table-action-link {
	@include clay-link($table-action-link);
}

// Table List Skin

.table-list {
	border-collapse: separate;
	border-spacing: 0;

	@include border-radius($table-list-border-radius);

	color: $table-list-color;
	font-size: $table-list-font-size;
	margin-bottom: $table-list-margin-bottom;
	margin-top: $table-list-margin-top;

	thead,
	tbody,
	tfoot {
		&:first-child {
			tr:first-child {
				th:first-child,
				td:first-child,
				.table-cell-start {
					@if $enable-rounded {
						border-top-left-radius: $table-list-border-radius;
					}
				}

				th:last-child,
				td:last-child,
				.table-cell-end {
					@if $enable-rounded {
						border-top-right-radius: $table-list-border-radius;
					}
				}
			}
		}

		&:last-child {
			tr:last-child {
				th:first-child,
				td:first-child,
				.table-cell-start {
					@if $enable-rounded {
						border-bottom-left-radius: $table-list-border-radius;
					}
				}

				th:last-child,
				td:last-child,
				.table-cell-end {
					@if $enable-rounded {
						border-bottom-right-radius: $table-list-border-radius;
					}
				}
			}
		}
	}

	.table-row-start {
		.table-cell-start {
			@if $enable-rounded {
				border-top-left-radius: $table-list-border-radius;
			}
		}

		.table-cell-end {
			@if $enable-rounded {
				border-top-right-radius: $table-list-border-radius;
			}
		}
	}

	.table-row-end {
		.table-cell-start {
			@if $enable-rounded {
				border-bottom-left-radius: $table-list-border-radius;
			}
		}

		.table-cell-end {
			@if $enable-rounded {
				border-bottom-right-radius: $table-list-border-radius;
			}
		}
	}

	th,
	td {
		box-shadow: inset 0 #{$table-list-border-y-width} $table-list-border-color, // top
					0 #{$table-list-border-y-width} $table-list-border-color; // bottom
		padding-top: $table-list-border-y-width + $table-cell-padding;

		&:first-child {
			box-shadow: inset 0 #{$table-list-border-y-width} $table-list-border-color, // top
						0 #{$table-list-border-y-width} $table-list-border-color, // bottom
						inset #{$table-list-border-x-width} 0 $table-list-border-color; // left
			padding-left: $table-list-border-x-width + $table-cell-padding;
			padding-top: $table-list-border-y-width + $table-cell-padding;
		}

		&:last-child {
			box-shadow: inset 0 #{$table-list-border-y-width} $table-list-border-color, // top
						inset #{-$table-list-border-x-width} 0 $table-list-border-color, // right
						0 #{$table-list-border-y-width} $table-list-border-color; // bottom
			padding-right: $table-list-border-x-width + $table-cell-padding;
			padding-top: $table-list-border-y-width + $table-cell-padding;
		}

		&:only-child {
			box-shadow: inset 0 #{$table-list-border-y-width} $table-list-border-color, // top
						inset #{-$table-list-border-x-width} 0 $table-list-border-color, // right
						0 #{$table-list-border-y-width} $table-list-border-color, // bottom
						inset #{$table-list-border-x-width} 0 $table-list-border-color; // left
			padding-left: $table-list-border-x-width + $table-cell-padding;
			padding-right: $table-list-border-x-width + $table-cell-padding;
			padding-top: $table-list-border-y-width + $table-cell-padding;
		}
	}

	.table-cell-start {
		box-shadow: inset 0 #{$table-list-border-y-width} $table-list-border-color, // top
					0 #{$table-list-border-y-width} $table-list-border-color, // bottom
					inset #{$table-list-border-x-width} 0 $table-list-border-color; // left
		padding-left: $table-list-border-x-width + $table-cell-padding;
		padding-top: $table-list-border-y-width + $table-cell-padding;
	}

	.table-cell-end {
		box-shadow: inset 0 #{$table-list-border-y-width} $table-list-border-color, // top
					inset #{-$table-list-border-x-width} 0 $table-list-border-color, // right
					0 #{$table-list-border-y-width} $table-list-border-color; // bottom
		padding-right: $table-list-border-x-width + $table-cell-padding;
		padding-top: $table-list-border-y-width + $table-cell-padding;
	}

	thead {
		td,
		th {
			// Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
			background-color: $table-list-head-bg;
			border-width: 0;
			font-size: $table-list-head-font-size;
			font-weight: $table-list-head-font-weight;
			height: $table-list-head-height;
			vertical-align: $table-list-head-vertical-alignment;
		}

		th a {
			@include clay-link($table-list-head-link);
		}
	}

	tbody,
	tfoot {
		td,
		th {
			// Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
			background-color: $table-list-bg;
			border-width: 0;
			vertical-align: middle;
		}
	}
}

.table-list.table-bordered {
	border-width: 0;

	th,
	td {
		box-shadow: inset 0 #{$table-list-border-y-width} #{$table-list-border-color}, // top
					inset #{-$table-list-border-x-width} 0 #{$table-list-border-color}, // right
					0 #{$table-list-border-y-width} #{$table-list-border-color}; // bottom
		padding-right: $table-list-border-x-width + $table-cell-padding;
		padding-top: $table-list-border-y-width + $table-cell-padding;

		&:first-child {
			box-shadow: inset 0 #{$table-list-border-y-width} #{$table-list-border-color}, // top
						inset #{-$table-list-border-x-width} 0 #{$table-list-border-color}, // right
						0 #{$table-list-border-y-width} #{$table-list-border-color}, // bottom
						inset #{$table-list-border-x-width} 0 #{$table-list-border-color}; // left
			padding-left: $table-list-border-x-width + $table-cell-padding;
			padding-right: $table-list-border-x-width + $table-cell-padding;
			padding-top: $table-list-border-y-width + $table-cell-padding;
		}
	}
}

// Table List Striped

.table-list.table-striped {
	tbody tr:nth-of-type(#{$table-striped-order}) {
		&,
		td,
		th {
			background-color: $table-list-accent-bg;
		}
	}
}

// Table List Hover

.table-list.table-hover {
	tbody tr {
		&:hover {
			&,
			td,
			th {
				background-color: $table-list-hover-bg;
			}
		}
	}
}

// Table List Active

.table-list.table-hover {
	.table-active {
		&:hover {
			background-color: $table-list-active-bg;

			> th,
			> td {
				background-color: $table-list-active-bg;
			}
		}
	}
}

.table-list .table-active {
	&,
	> th,
	> td {
		background-color: $table-list-active-bg;
	}
}

// Table List Disabled

.table-list .table-disabled {
	background-color: $table-list-disabled-bg;
	color: $table-list-disabled-color;

	> td,
	> th {
		background-color: $table-list-disabled-bg;
		cursor: $table-list-disabled-cursor;

		a {
			color: $table-list-disabled-color;
			pointer-events: $table-list-disabled-pointer-events;
		}
	}

	.table-title,
	.table-list-title {
		color: $table-list-disabled-color;
	}
}

.table-list.table-hover .table-disabled:hover {
	&,
	> td,
	> th {
		background-color: $table-list-disabled-bg;
	}
}

.table-list.table-striped {
	tbody .table-disabled:nth-of-type(#{$table-striped-order}) {
		&,
		td,
		th {
			background-color: $table-list-disabled-bg;
		}
	}
}

// Table List Title

.table-list-title {
	@include clay-text-typography($table-list-title);
}

.table-list-title a {
	@include clay-link($table-list-title-link);
}

// Table List Link

.table-list-link {
	@include clay-link($table-list-link);
}

// Table List Action Link

.table-list-action-link {
	@include clay-link($table-list-action-link);
}

// Table Helpers

.table-autofit {
	td,
	th {
		width: 1%;
	}

	.table-cell-expand {
		@extend %table-cell-expand;
	}

	.table-cell-expand-small {
		max-width: $table-cell-expand-small-max-width;
		width: $table-cell-expand-small-width;
		word-wrap: break-word;
	}

	.table-cell-expand-smaller {
		max-width: $table-cell-expand-smaller-max-width;
		width: $table-cell-expand-smaller-width;
		word-wrap: break-word;
	}

	.table-cell-expand-smallest {
		max-width: $table-cell-expand-smallest-max-width;
		width: $table-cell-expand-smallest-width;
		word-wrap: break-word;
	}
}

.table-nowrap {
	td,
	th {
		white-space: nowrap;
	}
}

.table-heading-nowrap thead {
	td,
	th {
		white-space: nowrap;
	}
}

.table .table-divider {
	background-color: $table-divider-bg;

	td,
	th {
		background-color: $table-divider-bg;
		color: $table-divider-color;
		font-size: $table-divider-font-size;
		font-weight: $table-divider-font-weight;
		padding: $table-divider-padding;
		text-transform: $table-divider-text-transform;
	}
}

.table-list .table-divider {
	td,
	th {
		padding-bottom: $table-list-divider-padding-y;
		padding-left: $table-list-border-x-width + $table-list-divider-padding-x;
		padding-right: $table-list-border-x-width + $table-list-divider-padding-x;
		padding-top: $table-list-border-y-width + $table-list-divider-padding-y;
	}
}

// Table Vertical Align

.table-valign-bottom {
	tbody,
	tfoot,
	thead {
		td,
		th {
			vertical-align: bottom;
		}
	}

	tbody {
		td,
		th {
			padding-bottom: $table-valign-bottom-body-cell-padding-bottom;
		}
	}

	&.show-quick-actions-on-hover {
		.quick-action-menu {
			align-items: flex-end;
		}
	}
}

.table-valign-middle {
	tbody,
	tfoot,
	thead {
		td,
		th {
			vertical-align: middle;
		}
	}
}

.table-valign-top {
	tbody,
	tfoot,
	thead {
		td,
		th {
			vertical-align: top;
		}
	}

	tbody {
		td,
		th {
			padding-top: $table-valign-top-body-cell-padding-top;
		}
	}

	&.show-quick-actions-on-hover {
		.quick-action-menu {
			align-items: flex-start;
		}
	}
}

// Tbody Vertical Align

.tbody-valign-bottom {
	tbody {
		td,
		th {
			padding-bottom: $table-valign-bottom-body-cell-padding-bottom;
			vertical-align: bottom;
		}
	}

	&.show-quick-actions-on-hover {
		.quick-action-menu {
			align-items: flex-end;
		}
	}
}

.tbody-valign-middle {
	tbody td {
		vertical-align: middle;
	}
}

.tbody-valign-top {
	tbody {
		td,
		th {
			padding-top: $table-valign-top-body-cell-padding-top;
			vertical-align: top;
		}
	}

	&.show-quick-actions-on-hover {
		.quick-action-menu {
			align-items: flex-start;
		}
	}
}

// Thead Vertical Align

.thead-valign-bottom {
	thead {
		td,
		th {
			vertical-align: bottom;
		}
	}
}

.thead-valign-middle {
	thead {
		td,
		th {
			vertical-align: middle;
		}
	}
}

.thead-valign-top {
	thead {
		td,
		th {
			vertical-align: top;
		}
	}
}

// Show Quick Action

.show-quick-actions-on-hover {
	tr:not(.table-active):not(.table-disabled) {
		&:hover {
			.quick-action-menu {
				display: flex;
			}
		}
	}

	.table-focus:not(.table-active):not(.table-disabled) {
		.quick-action-menu {
			display: flex;
		}
	}
}

.table {
	.quick-action-menu {
		align-items: $table-quick-action-menu-align-items;
		background-color: $table-quick-action-menu-bg;
		padding-bottom: $table-cell-padding;
		padding-top: $table-cell-padding;
	}
}

.table-striped {
	tbody tr:nth-of-type(#{$table-striped-order}) {
		.quick-action-menu {
			background-color: $table-quick-action-menu-accent-bg;
		}
	}

	tbody .table-active:nth-of-type(#{$table-striped-order}) {
		.quick-action-menu {
			background-color: $table-quick-action-menu-accent-active-bg;
		}
	}
}

.table-hover {
	tbody tr {
		&:hover {
			.quick-action-menu {
				background-color: $table-quick-action-menu-hover-bg;
			}
		}
	}

	tbody .table-active {
		&:hover {
			.quick-action-menu {
				background-color: $table-quick-action-menu-active-bg;
			}
		}
	}
}

.table-active {
	.quick-action-menu {
		background-color: $table-quick-action-menu-active-bg;
	}
}

.table-list {
	.quick-action-menu {
		align-items: $table-list-quick-action-menu-align-items;
		background-color: $table-list-quick-action-menu-bg;
		bottom: 0;
		top: $table-list-border-y-width;
	}
}

.table-list.table-striped {
	tbody tr:nth-of-type(#{$table-striped-order}) {
		.quick-action-menu {
			background-color: $table-list-quick-action-menu-accent-bg;
		}
	}

	tbody .table-active:nth-of-type(#{$table-striped-order}) {
		.quick-action-menu {
			background-color: $table-list-quick-action-menu-accent-active-bg;
		}
	}
}

.table-list.table-hover {
	tbody tr {
		&:hover {
			.quick-action-menu {
				background-color: $table-list-quick-action-menu-hover-bg;
			}
		}
	}

	tbody .table-active {
		&:hover {
			.quick-action-menu {
				background-color: $table-list-quick-action-menu-active-bg;
			}
		}
	}
}

.table-list .table-active {
	.quick-action-menu {
		background-color: $table-list-quick-action-menu-active-bg;
	}
}

// Table Utilities

.table {
	// Min Width

	.table-cell-minw-50 {
		min-width: 50px;
	}

	.table-cell-minw-75 {
		min-width: 75px;
	}

	.table-cell-minw-100 {
		min-width: 100px;
	}

	.table-cell-minw-150 {
		min-width: 150px;
	}

	.table-cell-minw-200 {
		min-width: 200px;
	}

	.table-cell-minw-250 {
		min-width: 250px;
	}

	.table-cell-minw-300 {
		min-width: 300px;
	}

	.table-cell-minw-350 {
		min-width: 350px;
	}

	.table-cell-minw-400 {
		min-width: 400px;
	}

	// White Space

	.table-cell-ws-normal {
		white-space: normal;
	}

	.table-cell-ws-nowrap {
		white-space: nowrap;
	}

	// Image

	.table-img {
		height: auto;
		max-height: $table-img-max-height;
		max-width: none;
		width: auto;
	}
}