.table {
	table {
		margin: 0;
	}

	padding: 0;

	thead .table-heading,
	thead .table-item {
		border-bottom: 1px solid var(--color-neutral-10);
	}

	tbody .table-heading,
	tbody .table-item {
		border-bottom: 1px solid var(--color-neutral-0);
	}

	// Remove the border from the last item in the body of the table.
	tbody tr:last-child .table-heading,
	tbody tr:last-child .table-item {
		border: none;
	}

	&.is-compact-table {
		padding: 0.5em 0;

		.table-row {
			line-height: 28px;
			&.is-header {
				.table-item__cell-title::after {
					display: none;
				}

				&:hover {
					background-color: initial;
				}
			}

			&:hover {
				background: var(--color-neutral-0);

				.table-item__cell-title::after {
					background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--color-neutral-0) 90%);
				}
			}
		}

		.table-heading,
		.table-item {
			border-bottom: none;
			text-align: right;
			padding: 0 8px;
			white-space: nowrap;
			font-size: $font-body-extra-small;

			&:first-child {
				padding: 0 8px 0 16px;
			}

			&:last-child {
				padding: 0 16px 0 8px;
			}

			&.is-title-cell {
				text-align: left;
				width: 100%;
				// https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell
				max-width: 0;
			}

			svg {
				margin: auto 0 auto auto;
			}
		}

		.table-item__cell-title {
			width: 100%;
			position: relative;
			overflow: hidden;

			&::after {
				background-image: linear-gradient(to right, color-mix(in srgb, var(--color-surface) 0%, transparent) 0%, var(--color-surface) 90%);
				position: absolute;
				z-index: 1;
				right: 0;
				top: 0;
				bottom: 0;
				content: "";
				width: 48px;
			}
		}
	}

	&.is-horizontally-scrollable {
		.table__wrapper-shadow {
			position: relative;
			overflow: hidden;

			&::after {
				content: "";
				display: block;
				width: 24px;
				height: 100%;
				position: absolute;
				right: -12px;
				top: 0;
				background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-neutral-70) 12.5%, transparent) 0%, color-mix(in srgb, var(--color-surface) 0%, transparent) 75%, color-mix(in srgb, var(--color-surface) 0%, transparent) 90%);
			}

			@include breakpoint-deprecated( ">660px" ) {
				&::after {
					display: none;
				}
			}
		}

		.table__wrapper {
			width: 1px;
			max-width: 100%;
			min-width: 100%;
			overflow-x: auto;

			table {
				white-space: nowrap;
			}
		}
	}
}

.table-row {
	&:hover {
		background: var(--color-neutral-0);

		&.is-header {
			background-color: initial;
		}
	}

	&.is-header {
		color: var(--color-neutral-70);
		font-weight: 600;
	}

	&.has-action {
		cursor: pointer;

		&:focus,
		&:active {
			box-shadow: inset 2px 0 0 var(--color-primary);
		}
	}
}

.table-heading,
.table-item {
	font-size: $font-body-small;
	padding: 16px;
	vertical-align: middle;

	&:first-child {
		padding-left: 24px;
	}

	&:last-child {
		padding-right: 24px;
	}

	&.is-row-heading {
		font-weight: normal;
	}

	&.is-align-right {
		text-align: right;

		svg {
			margin: auto 0 auto auto;
		}
	}

	svg {
		display: block;
	}
}
