@layer main {
	@layer tables {
		table {
			border-collapse: collapse;
			width: 100%;
			/* table-layout: fixed; */
		}

		th,
		td {
			padding: var(--spacer) calc(var(--spacer) * .75);
			scroll-snap-align: start;
		}

		th{
			text-align: left;
			font-weight: 500;

			thead & {
				background-color: rgb(var(--color-blue));
				color: rgb(var(--color-white));
			}

			&.orderable{
				cursor: pointer;

				&:after{
					font-family: var(--font-family-icon);
					content: '\E03E';
					font-weight: 400;
					vertical-align: middle;
					margin-left: 1ch;
				}

				&.ordered-by{
					font-weight: 700;
				}

				&.direction-asc:after{
					content: '\E08E';
				}
			}
		}

		td
		tbody th{
			background-color: rgb(var(--color-lt-gray));
		}

		tr {

			&:nth-child(even) {
				td,
				th {
					background-color: rgb(var(--color-lt-gray));
				}
			}
		}
	}

	.table-overflow{
		overflow: scroll;
		scroll-snap-type: x mandatory;
	}

	.table-toolbar{
		margin-top: calc(var(--spacer) * 2);

		.table-per-view{
			display: flex;
			align-items: center;
			gap: calc(var(--spacer) * .75);
			white-space: nowrap;

			@container (max-width: 1024px){
				order: 3;

				label{
					display: none;
				}
			}
		}

		.pagination{
			@container (max-width: 1024px){
				order: 2;
			}
		}

		.results-total{
			@container (max-width: 1024px){
				order: 1;
				flex-grow: 1;
				width: 100%;
				margin-bottom: calc(var(--spacer) * 1.5);
			}
		}
	}
}