table {
	table-layout: auto;
	border-collapse: collapse;
	margin: 0.8rem 0;
	width: 100%;
	position: relative;
	hyphens: auto;

	th {
		border-bottom: $border-width solid $border-color;
		color: $lightgray-500;
		line-height: 1em;
		text-align: inherit;
		font-size: $font-size-sm;
		padding: $unit-2 $unit-1;
		text-transform: uppercase;
	}

	tr {
		position: relative;
		margin: 0;

		&:hover .table-actions {
			display: inline-flex;
			justify-content: center;
			background: #ffffff;
		}

		&.selected,
		&:focus {
			background: $lightgray-300;
		}

		&:focus {
			outline: none;
		}
	}

	td {
		position: relative;
		line-height: 1.2rem;
		padding: $unit-2 $unit-1;
		border-bottom: 1px solid #dbdbdb;

		&.empty {
			text-align: center;
			color: $lightgray-500;
		}
	}

	i {
		font-size: 1rem !important;
		color: $darkgray-300;
		margin: 0 0.2rem;

		&.disabled {
			color: $lightgray-500;
		}
	}

	.table-actions {
		display: none;
		font-size: 0.8rem;
		padding: 0.25rem;
		border-radius: 0.1rem;
		z-index: $zindex-4;
		line-height: 0.8rem;
		width: auto;
		position: absolute;
		border: 0;
		top: 50%;
		margin-top: -0.8rem;
		right: 0.8rem;
		float: right;
		box-shadow: 0 0 1px #999;

		i {
			margin: 0 $unit-1;
			color: $lightgray-500;

			&:hover {
				cursor: pointer;
				color: $darkgray-500;
			}
		}
	}

	.form-group {
		width: 32px;
		line-height: 0;

		.form-icon {
			top: 0.2rem;
		}
	}

	.form-checkbox {
		margin: 0;
		line-height: 1.2rem;
		padding: 0 0.4rem;
	}

	&.no-header {
		margin-top: -0.5em;
	}
}

.x-scroll {
	width: 100%;
	height: 100%;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}