.ui-table {
	--ui-table-cell-padding: 0.75rem;

	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
}

.ui-table .ui-button--size-xs {
	padding-block: 0.125rem;
}

.ui-table :is(th, td) {
	padding: var(--ui-table-cell-padding);
	text-align: left;
	line-height: 1.35;
}

.ui-table > thead > tr {
	border-bottom: 1px solid var(--ui-color-border);
}

.ui-table > thead > tr > th {
	vertical-align: bottom;
}

.ui-table__caption {
	caption-side: top;
	padding: var(--ui-table-cell-padding);
	background-color: color-mix(in srgb, currentColor 3%, var(--ui-color-surface));
	font-size: var(--ui-font-size-m);
	font-weight: 500;
	text-align: left;
}

.ui-table > tbody > tr + tr {
	border-top: 1px solid var(--ui-color-border);
}

.ui-table > tbody > tr > :is(th, td) {
	vertical-align: top;
}

.ui-table > tfoot > tr > td.ui-table__toolbar {
	padding: 0;
}

.ui-table > tfoot > tr > td.ui-table__no-records {
	padding-top: 0.5rem;
}

.ui-table__navigation {
	border-top: 1px solid var(--ui-color-border);
	padding-top: 0.75rem;
	padding-inline: var(--ui-table-cell-padding);
}

.ui-table--middle > tbody > tr > :is(th, td),
.ui-table > tbody > tr.ui-table__row--middle > :is(th, td) {
	vertical-align: middle;
}

.ui-table--compact {
	--ui-table-cell-padding: 0.25rem 0.313rem;
}

.ui-table--inline {
	width: max-content !important;
	max-width: 100%;
	align-self: flex-start;
}

.ui-table--striped > tbody > tr:nth-child(odd) {
	background-color: color-mix(in srgb, var(--ui-color-primary) 4%, var(--ui-color-surface));
}

.ui-table--hover > tbody > tr:hover {
	background-color: color-mix(in srgb, var(--ui-color-primary) 7%, var(--ui-color-surface));
}

.ui-table--spreadsheet > tbody > tr > td:has(> .ui-input) {
	padding: 0;
}

/* .ui-table--spreadsheet > tbody > tr > td > .ui-input {
	width: max-content;
} */

.ui-table--spreadsheet > tbody > tr > td:has(> .ui-input) :is(input, select, textarea) {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.ui-table--spreadsheet > tbody > tr > td:has(> .ui-input):hover {
	background-color: color-mix(in srgb, var(--ui-color-primary) 4%, var(--ui-color-surface));
}

.ui-table--spreadsheet > tbody > tr > td:has(> .ui-input.ui-input--error) {
	background-color: var(--ui-color-danger-surface);
}

.ui-table--spreadsheet .ui-table__actions {
	padding: 1px 0.5rem;
}

.ui-table--spreadsheet > tbody > tr > td:has(> .ui-input) :is(input, select, textarea):focus {
	outline: 2px solid var(--ui-focus-border);
	outline-offset: -2px;
}

.ui-table__actions {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

.ui-table tbody tr.ui-table__row--success > td {
	background-color: var(--ui-color-success-surface);
}

.ui-table tbody tr.ui-table__row--danger > td {
	background-color: var(--ui-color-danger-surface);
}

.ui-table tbody tr.ui-table__row--warning > td {
	background-color: var(--ui-color-warning-surface);
}

.ui-table tbody tr.ui-table__row--muted {
	color: var(--ui-color-text-muted);
}

.ui-table tbody tr.ui-table__row--muted > td {
	background-color: var(--ui-color-neutral-bg);
}

.ui-table th.nowrap,
.ui-table td.nowrap {
	white-space: nowrap;
}

.ui-table td.multiline p:first-child {
	margin-top: 0;
}

.ui-table td.multiline p:last-child {
	margin-bottom: 0;
}