/* Widgets - Table */
////
/// @group Widgets-Table
/// Widgets - Table

///
.table {
	border: var(--border-size-s) solid var(--color-neutral-4);
	border-radius: var(--border-radius-soft);
	border-spacing: 0;
	empty-cells: show;
	white-space: nowrap;
	width: 100%;
	word-break: keep-all;

	&-header {
		// Service Studio Preview
		& {
			-servicestudio-border-bottom: none !important;
		}

		th {
			background-color: var(--color-neutral-0);
			border-bottom: var(--border-size-s) solid var(--color-neutral-4);
			color: var(--color-neutral-8);
			font-weight: var(--font-semi-bold);
			height: 48px;
			padding: var(--space-none) var(--space-m);
			text-align: left;

			&:first-child {
				border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none)
					var(--border-radius-none);
			}

			&:last-child {
				border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-none)
					var(--border-radius-none);
			}

			&.sortable {
				cursor: pointer;
			}

			&.sorted {
				color: var(--color-primary);
			}
		}
	}

	&-row {
		&:hover td {
			background: var(--color-neutral-2);
		}

		&.table-row-selected td {
			background: var(--color-primary) var(--color-primary-lightest);
		}

		td {
			background: var(--color-neutral-0);
			border-bottom: var(--border-size-s) solid var(--color-neutral-4);
			height: 56px;
			padding: var(--space-s) var(--space-m);
			vertical-align: inherit;
		}

		&-small {
			td {
				height: 48px;
			}
		}

		&-medium {
			td {
				height: 64px;
			}
		}

		&-stripping:nth-child(even) {
			td {
				background: var(--color-neutral-1);
			}
		}
	}

	.table-row:last-child {
		& td {
			border-bottom: none;

			&:last-child {
				border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft)
					var(--border-radius-none);
			}
		}

		td:first-child {
			border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-none)
				var(--border-radius-soft);
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.table-header th.sortable:hover {
		color: var(--color-primary);
	}
}

/* enable the horizontal scroll when has the utility class */
///
.tablet {
	.overflow-horizontal {
		.table {
			overflow-x: auto;
		}
	}
}

///
.phone,
.tablet {
	div:not(.overflow-horizontal) {
		& > .table:not(.table-no-responsive) {
			word-break: break-all;
		}
	}

	.table {
		th {
			width: 100%;
		}

		&-no-responsive {
			overflow-x: auto;
			word-break: break-all;

			// Service Studio Preview
			& {
				-servicestudio-word-break: normal;
			}
		}

		&:not(.table-no-responsive) {
			overflow: hidden;

			thead {
				display: none;

				// Service Studio Preview
				& {
					-servicestudio-display: none;
				}
			}

			tr,
			td {
				display: block;

				// Service Studio Preview
				& {
					-servicestudio-word-break: normal;
				}
			}

			tr {
				border-bottom: var(--border-size-s) solid var(--color-neutral-4);
			}

			td {
				border-bottom: 0;
				display: flex;
				height: auto;
				position: relative;
				text-align: left !important;
				width: 100% !important;

				&:before {
					content: attr(data-header);
					display: block;
					font-weight: bold;
					margin-right: 10px;
					max-width: 110px;
					min-width: 110px;
					word-break: break-word;
					white-space: normal;
				}

				&:not([data-header]) {
					&:before {
						display: none;
					}
				}
			}
		}
	}

	.layout-native {
		.table:not(.table-responsive) {
			thead {
				display: table-header-group;
			}

			tr {
				display: table-row;
			}

			td {
				background: var(--color-neutral-0);
				border-bottom: var(--border-size-s) solid var(--color-neutral-4);
				display: table-cell;
				padding: var(--space-s) var(--space-m);
				vertical-align: inherit;
				width: auto !important;

				// Service Studio Preview
				& {
					-servicestudio-word-break: break-all;
				}
			}

			td:before {
				display: none;
			}
		}
	}

	.layout:not(.layout-native) .table:not(.table-no-responsive) tbody {
		display: block;
		width: 100%;
	}
}

///
.phone {
	.table {
		&:not(.table-responsive) {
			display: block;
			overflow: auto;
			position: relative;

			// Service Studio Preview
			& {
				-servicestudio-display: table;
			}
		}
	}

	.layout-native {
		.table {
			&:not(.table-responsive) {
				td:before {
					display: none;
				}
			}
		}
	}
}

/* ============================================================================= */
/* Table > td */
/* ============================================================================= */
///td

// Accessibility ------------------------------------------------------------------
///
.has-accessible-features {
	th.sortable:focus {
		box-shadow: 0 0 0 3px var(--color-focus-outer);
		position: relative;
		z-index: var(--layer-global-screen);
	}
}

// IsRTL --------------------------------------------------------------------
///
.is-rtl {
	&.phone,
	&.tablet {
		.table:not(.table-no-responsive) {
			td {
				text-align: right !important;
			}

			td:before {
				margin-left: 10px;
				margin-right: 0px;
			}
		}
	}

	.table-header th {
		text-align: right;
	}

	.sortable-icon {
		margin-left: var(--space-none);
		right: var(--space-s);
	}
}