.table {
	width: 100%;
	border-collapse: collapse;

	> thead,
	> tbody {
		> tr {
			> th,
			> td {
				padding: $sp-3;
				text-align: left;
				vertical-align: top;
			}
		}
	}

	> thead,
	> tbody {
		> tr {
			> th { font-weight: $font-bold;}
		}
	}

	> thead {
		> tr {
			> th { background-color: var(--co-muted);}
		}
	}

	> tbody {
		> tr {
			> th,
			> td {
				padding: $sp-2 $sp-3;
				text-align: left;
				vertical-align: top;
				border-bottom: 1px solid var(--co-muted);
			}
		}
	}
}

.table-striped {
	> tbody > tr {
		> th, > td { border-bottom-color: transparent;}

		&:nth-of-type(even) {
			background-color: var(--co-muted);
		}
	}
}

.table-hover {
	> tbody > tr:hover {
		background-color: var(--co-muted);
	}
}

.table-responsive {
	overflow-y: auto;

	@include scrollBar();
}

.table-box {
	.is-sm {
		width: 1px;
	}
}


@include mediaQ(mdMax) {
	.table-box {
		--title-width: 10rem;
		display: block;

		thead { display: none;}

		tbody { display: block; }

		.is-sm {
			width: auto;
		}

		tr {
			display: block;
			border-bottom: 1px solid var(--co-muted);
			&:first-child td:first-child {
				border-top: 1px solid var(--co-muted) !important;
			}
			> td:first-child {
				padding-top: $sp-4;
			}
			> td:last-child {
				padding-bottom: $sp-4;
			}
		}

		td {
			display: flex;
			flex-wrap: wrap;
			gap: $sp-1;
			padding-left: 0 !important;
			padding-right: 0 !important;
			border: none !important;

			&::before {
				content: attr(data-title);
				display: inline-block;
				width: var(--title-width);
				max-width: var(--title-width);
				font-weight: $font-bold;
			}
		}

		/* &-header {
			display: none;
		}
		&-body {
			display: flex;
			flex-direction: column;
			gap: $sp-1;
			padding: $sp-3;
			margin-bottom: $sp-3;
			border: 1px solid var(--co-muted);

			.is-cell {
				display: flex;
				flex-wrap: wrap;
				gap: $sp-1;
				&::before {
					content: attr(data-title);
					display: inline-block;
					width: var(--title-width);
					max-width: var(--title-width);
					font-weight: $font-bold;
				}
				&:last-child {
					padding-top: $sp-1;
					&:before {
						content: none;
					}
				}
			}
		} */
	}
}

@include mediaQ(smMax) {
	.table-responsive {
		border: 1px solid var(--co-muted);
		th, td {
			white-space: nowrap;
		}
	}
}

@include mediaQ(md) {
	.table-logs {
		table-layout: fixed;
		th {
			white-space: nowrap;
		}
		th:nth-child(1), td:nth-child(1) {
			width: 6rem;
		}
		th:nth-child(2), td:nth-child(2) {
			width: 8rem;
		}
		th:nth-child(3), td:nth-child(3) {
			width: 12rem;
		}
		th:last-child, td:last-child {
			width: 100% !important;
		}
	}
}