@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@Table-cell-padding-extended: 8px 9.4px;
@Table-cell-padding-compressed: 2.5px 9.4px;

.lucid-Table {
	font: 500 @font;
	color: @color-textColor;
	background-color: @color-white;
	border-collapse: collapse;
	border-spacing: 0;
	box-sizing: border-box;

	// `Table`.`hasBorder` prop
	&-has-border {
		border: @border-table;
	}

	// `Table`.`density` prop
	&-density-extended {
		& > .lucid-Table-Tbody > .lucid-Table-Tr > .lucid-Table-Td {
			padding: @Table-cell-padding-extended;
		}
	}

	&-density-compressed {
		& > .lucid-Table-Tbody > .lucid-Table-Tr > .lucid-Table-Td {
			padding: @Table-cell-padding-compressed;
		}
	}

	// padding was causing content in `Th` to not line up with `Td`
	.lucid-Table-Th {
		padding: 0;
	}

	// `Table`.`hasWordWrap` prop
	.lucid-Table-Td,
	.lucid-Table-Th {
		white-space: nowrap;
	}

	&-has-word-wrap {
		.lucid-Table-Td,
		.lucid-Table-Th {
			white-space: initial;
		}
	}

	// Table header styles
	&.lucid-Table-has-light-header > &-Thead {
		background-color: @color-table-header-light;
		color: @color-darkGray;
		border: 1px solid @color-borderColorLight;
		& > .lucid-Table-Tr > .lucid-Table-Th {
			border: @border-table-header-light;
		}
		& > .lucid-Table-Tr > .lucid-Table-Th {
			&.lucid-Table-is-sortable {
					&:hover {
						background-color: @color-table-header-sorted-light;
					}
			}

			& > .lucid-Table-Th-inner {
					// `Th`.`isSorted` prop
					.lucid-Table-Th-inner-caret {
						.lucid-Table-sort-icon {
							fill: @color-textColor;
						}
					}
			}
		}
	}

	& > &-Thead {
		background-color: @color-table-header;
		color: @color-white;

		// Table header cell styles
		& > .lucid-Table-Tr > .lucid-Table-Th {
			border: @border-table-header;
			&.lucid-Table-has-light-header {
				border: @border-table-header-light;
			}

			height: @size-standard-height; // effectively min height

			// remove all borders from the perimeter of the header
			&.lucid-Table-is-first-row {
				border-top: 0 none @color-transparent;
			}

			&.lucid-Table-is-last-row {
				border-bottom: 0 none @color-transparent;
			}

			&.lucid-Table-is-first-col {
				border-left: 0 none @color-transparent;
			}

			&.lucid-Table-is-last-col {
				border-right: 0 none @color-transparent;
			}
			// `Th`.`isSortable` prop
			&.lucid-Table-is-sortable {
				cursor: pointer;

				&:hover {
					background-color: @color-table-header-sorted;
				}
			}

			// header cell content
			& > .lucid-Table-Th-inner {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: flex-end;

				.lucid-Table-Th-inner-content {
					flex: 1 0 auto;
					display: flex;
					align-items: center;
					margin: 2.5px 9.4px;
				}
				// `Th`.`isSorted` prop
				.lucid-Table-Th-inner-caret {
					margin-right: 9px;
					display: flex;
					align-items: center;

					.lucid-Table-sort-icon {
						fill: @color-white;
						width: 8px;
						height: 8px;
					}
				}
				// `Th`.`isResizable` prop
				.lucid-Table-Th-inner-resize {
					cursor: ew-resize;
					width: 4px;
					background-color: fade(@color-black, 70%);
					opacity: 0;
					transition: opacity @timing-animation-hover;

					&:hover {
						opacity: 1;
					}
				}
			}

			// `Th`.`align` prop - use flex alignments in header
			&.lucid-Table-align-left > .lucid-Table-Th-inner .lucid-Table-Th-inner-content {
				justify-content: flex-start;
			}

			&.lucid-Table-align-center > .lucid-Table-Th-inner .lucid-Table-Th-inner-content {
				justify-content: center;
			}

			&.lucid-Table-align-right > .lucid-Table-Th-inner .lucid-Table-Th-inner-content {
				justify-content: flex-end;
			}
		}
	}

	// Table body cell styles
	& > &-Tbody {
		& > .lucid-Table-Tr {

			// `Td`.`align` prop - use text alignments in body
			// Table body cell styles
			& > .lucid-Table-Td {
				background-clip: padding-box; // fixes Firefox background paints over collapsed border
				border-bottom: @border-table-body;

				// remove all borders from the perimeter of the body
				&.lucid-Table-is-first-row {
					border-top: 0 none @color-transparent;
				}

				&.lucid-Table-is-last-row {
					border-bottom: 0 none @color-transparent;
				}

				&.lucid-Table-is-first-col {
					border-left: 0 none @color-transparent;
				}

				&.lucid-Table-is-last-col {
					border-right: 0 none @color-transparent;
				}

				// `Td`.`hasBorderRight` prop
				&.lucid-Table-has-border-right {
					border-right: @border-table-body;
				}

				// `Td`.`hasBorderLeft` prop
				&.lucid-Table-has-border-left {
					border-left: @border-table-body;
				}

				&.lucid-Table-align-left {
					text-align: left;
				}

				&.lucid-Table-align-center {
					text-align: center;
				}

				&.lucid-Table-align-right {
					text-align: right;
				}
			}

			// style row cells on hover
			&:hover {
				.selectCellsOnRow({ background-color: @color-lightGray;});
			};

			// `Tr`.`isSelected` prop
			// style row cells
			&.lucid-Table-is-selected {
				.selectCellsOnRow({background-color: @featured-color-primary-backgroundColorLight;});

				// style row cells on hover
				&:hover {
					.selectCellsOnRow({background-color: multiply(@color-primaryLight, @color-lightGray);});
				}
			}

			// `Tr`.`isActive` prop
			// style row cells
			&.lucid-Table-is-active {
				.selectCellsOnRow({background-color: @featured-color-primary-backgroundColor;});
				// always show marker on first cell
				.selectFirstCellOnRow({.left-marker(1);});

				// style row cells on hover
				&:hover {
					.selectCellsOnRow({background-color: multiply(@color-primaryMedium, @color-lightGray);});
				}
			}

			// `Tr`.`isActionable` prop
			// style cells of rows which are only actionable but not active
			&.lucid-Table-is-actionable:not(.lucid-Table-is-active) {

				// place hidden marker on first cell
				.selectFirstCellOnRow({ .left-marker(0); });

				// show marker on hover
				&:hover {
					.selectFirstCellOnRow({ .left-marker(1); });
				}
			}
		}
	}

	// link styles in the Table body
	a {
		color: @color-linkColor;
	}
}

// `Tr`.`isDisabled` prop
.lucid-Table-is-disabled {
	color: @color-disabledText;
	font-style: italic;

	a {
		color: fade(multiply(@color-disabledText, @color-linkColor), 50%);
	}
}

// MIXINS

// Select all 1-height cells on the current body row and apply the given styles
.selectCellsOnRow(@ruleset) {
	& > .lucid-Table-Td {
		&:not([rowspan]),
		&[rowspan='1'] {
			@ruleset();
		}
	}
}

// Select the first 1-height cell on the current body row and apply the given styles
.selectFirstCellOnRow(@ruleset) {
	& > .lucid-Table-Td {
		&.lucid-Table-is-first-single {
			@ruleset();
		}
	}
}