@layer library {
	.table {
		border-collapse: collapse;
		width: 100%;

		tr {
			border-bottom: 1px solid var(--grey-200);

			th {
				text-transform: uppercase;
			}

			th,
			td {
				color: var(--grey-600);
				font-family: WorkSans;
				font-weight: 700;
				font-size: 0.75rem;
				line-height: 1.125rem;
				padding: 0.5rem;
			}

			td {
				font-weight: 400;
				text-align: center;
			}

			td.checkbox {
				display: flex;
				align-items: center;
				gap: 0.25rem;
				justify-content: center;
			}
		}

		tr:has(> td.checkbox > input:checked) {
			background-color: var(--brand-50);
			border-bottom: 1px solid var(--brand-600);
		}
	}

	.table:not(.invert) {
		tr:nth-child(even) {
			background-color: var(--grey-50);
		}
	}

	.table.invert {
		tr:nth-child(odd) {
			background-color: var(--grey-50);
		}
	}
}