/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/
.ui-table {
	border-color: var(--color-gray-light);
	background-color: transparent;
	font-size: 14px;

	& th {
		border-top: 0;
		border-bottom: 2px solid var(--color-gray-light);
		background-color: var(--color-gray-300);
		color: var(--color-gray-dark);
		text-align: left;
		font-size: 11px;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	& th,
	& td {
		padding: 15px;
		line-height: 1.4;
		vertical-align: top;
	}

	& tbody tr:hover {
		background: rgba(var(--color-primary-rgb), 0.20) !important;
		color: var(--color-secondary);
	}

	& td {
		border-top: 1px solid var(--color-gray-light);
	}
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: rgba(var(--color-gray-500-rgb), 0.1);
}

.table-bordered {
	border: 1px solid var(--color-gray-light);

	& th,
	& td {
		border: 1px solid var(--color-gray-light);
	}

	& thead {
		& th,
		& td {
			border-bottom-width: 2px;
		}
	}
}

.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;

	& > .table-bordered {
		border: 0;
	}

	& > *:last-child {
		margin: 0;
	}
}

/* .is-inverted support */
.ui-table.is-inverted,
.is-inverted .ui-table:not(.keep-default) {
	border-color: var(--color-secondary);

	& th {
		border-bottom: 2px solid var(--color-secondary);
		background-color: var(--color-secondary);
		color: var(--color-white);
	}

	& tbody tr:hover {
		background: rgba(var(--color-secondary-light-rgb), 0.2) !important;
		color: var(--color-white);
	}

	& td {
		border-top: 1px solid var(--color-secondary);
	}

	&.table-striped > tbody > tr:nth-of-type(odd) {
		background-color: rgba(var(--color-secondary-light-rgb), 0.1);
	}

	&.table-bordered {
		border: 1px solid var(--color-secondary);

		& th,
		& td {
			border: 1px solid var(--color-secondary);
		}
	}
}