@layer components {
	table {
		display: block; /* fixes scrolling when in a flexbox */
		border-collapse: collapse;

		thead {
			border-color: var(--table-border);
			border-width: var(--border-thin) var(--border-thin) 0 var(--border-thin);

			& > tr {
				border-color: var(--table-body-border);

				& > :is(th, td) {
					border-color: var(--table-body-border);
					background-color: var(--table-thead);
				}
			}

			& + tbody {
				border-top-width: var(--border-thin);
			}
		}
		tbody {
			border-color: var(--table-body-border) var(--table-border);
			border-left-width: var(--border-thin);
			border-right-width: var(--border-thin);
			border-bottom-width: 0;

			& > tr {
				border-color: var(--table-border);

				& > :is(th, td) {
					border-color: var(--table-border);
					background-color: var(--table-tbody);
				}
			}

			&:has(+ tfoot) {
				border-bottom-width: var(--border-thin);
			}
		}
		tfoot {
			border-color: var(--table-border);
			border-width: 0 var(--border-thin) var(--border-thin) var(--border-thin);

			& > tr {
				border-color: var(--table-body-border);

				& > :is(th, td) {
					border-color: var(--table-body-border);
					background-color: var(--table-tfoot);
				}
			}
		}

		th,
	   	td {
			padding: 0.5em;
		}

		tr {
			border-width: 0 0 var(--border-thin) 0;

			&:last-child {
				border: none;
			}
		}
		th, td {
			border-width: 0 var(--border-thin) 0 0;

			&:last-child {
				border: none;
			}
		}
	}
}