/** Tables */
.table-actions {
	align-self: flex-end; // Align to bottom of the parent
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 1.5rem 1rem;
	justify-content: flex-start;
	&.sidebar {
		justify-content: flex-end;
	}

	.search-box {
		margin-block: 0;
		display: flex;
		gap: .5rem;
		align-items: stretch;
		justify-content: center;
		flex-wrap: wrap;

		input {
			width: auto;
		}
	}
	.button,.btn {
		margin: 0;
	}

	:is(.button, .btn, input[type=text], input[type=submit]) {
		min-height: 42px;
	}
}

.tablenav {
	display: flex;
	margin-block: 1em;
	margin-inline: 0;
	padding: 0;
	flex-wrap: wrap;
	gap: .5em 0;
	height: auto;

	justify-content: start;
	align-items: end;

	.actions {
		display: flex;
		gap: .5em;
		align-items: stretch;
	}
	input {
		width: auto !important;
		min-height: unset !important;
	}
	:is(input[type=submit]) {
		min-height: 42px;
	}
	:is(.category-dropdown) {
		border-radius: 4px;
		min-height: 42px;
		border: 1px solid var(--color-mid-glare);
		min-width: 12.5em;
		font-size: .875rem;
		margin-right: 0;
	}
	.tablenav-pages {
		float: none;
		margin-inline-start: auto;
		margin-block: 0;
	}

	.pagination-links {
		@media screen and (min-width: 783px) {
			display: inline-flex;
			align-items: baseline;
			gap: 4px;
		}
	}
	.button {
		background-color: transparent;
		color: inherit;
		border: 1px solid var(--color-secondary);

		&:not(:where([disabled],.disabled)):where(:hover,:focus) {
			border-color: var(--color-primary);
			outline: 2px solid var(--color-primary);
		}
	}
}

.subsubsub {
	margin: 0;
	li {
		a {
			border: 1px solid var(--border-color, var(--color-mid-glare));
			font-size: 0.875rem;
			display: inline-block;
			padding-inline: 1rem;
			padding-block: .3125rem;

			&:where(:hover,:focus-visible,.current) {
				background: var(--color-primary-glare);
				text-decoration: none;
			}
			&:where(:focus-visible) {
				outline-color: var(--color-primary);
			}
			&.current {
				--border-color: var(--color-primary);
			}
		}

		&:first-of-type a {
			border-start-start-radius: 4px;
			border-end-start-radius: 4px;

			&:not(.current) {
				border-inline-end-width: 0;
			}
		}
		&:last-of-type a {
			border-start-end-radius: 4px;
			border-end-end-radius: 4px;

			&:not(.current) {
				border-inline-start-width: 0;
			}
		}
	}
}

@media screen and (min-width: 1100px) {
	// .column-type, .column-user_name {
	// 	width: 30ch;
	// }
	.column-usage_blocks, .column-activity_type, .column-contact_count, .column-created {
		width: 20ch;
	}
	.column-lead_score {
		width: 15ch;
	}
}

.wp-list-table {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	border-collapse: separate !important; // For radius

	&.api_key_table {
		margin-block-start: 1rem;
		margin-block-end: 2rem;

		caption {
			font-weight: bold;
			color: inherit;
			caption-side: top;
			padding-block: .75em;
			text-align: start;
		}
	}
	th, td {
		font-size: 0.9375rem;
		&:where(.column-count) {
			text-align: center;
		}
	}
	th {
		font-weight: 700;
		&:not(.check-column,.column-cb) {
			padding-block: 1rem;
			padding-inline: 1rem;
		}
		&:where(.sortable,.sorted) a {
			padding: 0;
			color: inherit;
		}
		&:where(.column-count) a {
			display: flex;
			justify-content: center;
			> span {
				float: none;
			}
		}
		&:where(.column-lead_score, .column-contact_count) a {
			display: flex;
			justify-content: center;
			> span {
				float: none;
			}
		}
	}
	@media screen and (min-width: 783px) {
		td {
			&:not(.check-column,.column-cb) {
				padding-block: .5rem;
				padding-inline: 1rem;
			}

			&:where(.column-lead_score, .column-contact_count) {
				text-align: center;
			}
		}
	}
	tbody {
		tr:hover {
			background-color: #f8f8f8;
		}
		> :nth-child(2n+1) {
			background-color: inherit;
		}
		> :not(:last-child) > :where(th,td) {
			border-bottom: 1px solid var(--color-mid-glare);
		}
	}

	&.export_requests {
		.notice {
			// Due to small spaces
			word-break: initial;
			box-decoration-break: clone;
		}
		tr.status-request-completed .check-column {
			border-left-color: #72aee6;
		}
		tr.status-request-failed .check-column {
			border-left-color: #d63638;
		}
		.check-column {
  			border-left: 4px solid transparent;
		}
		.row-actions.processing {
			position: static;
		}
		.status-label.status-request-pending {
			font-weight: 400;
			font-style: italic;
			color: #646970;
		}
		.status-label.status-request-failed {
			color: #d63638;
			font-weight: 600;
		}
		.status-label .status-date {
			display: block;
			font-weight: 400;
		}
	}
}