@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.site-table__table-row {
	&:hover:not(.is-expanded):not(.site-table__table-row-site-error):not(.site-table__table-row-active) {
		background: var(--studio-gray-0);

		.sites-overview__overlay {
			background: linear-gradient(to right, rgba(246, 247, 247, 0.8) 30%, rgba(246, 247, 247, 1) 100%);
		}
	}
	&:hover {
		.site-set-favorite__favorite-icon {
			visibility: visible;
		}

		.site-select-checkbox input:disabled {
			background: var(--color-neutral-10);
			cursor: not-allowed;
		}
	}
	&-disabled {
		background: unset !important;

		.sites-overview__overlay {
			background: unset !important;
		}
	}
	&-active {
		border-width: 0 1px;
		border-style: solid;
		border-color: var(--studio-gray-5);
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	}
}

td.site-table__actions {
	padding: 0;

	@include break-wide {
		width: 30px;
	}

	@include break-huge {
		width: 50px;
	}
}

td.site-table__actions-button {
	border-right: none;
	button {
		@include break-wide {
			margin-inline-start: 8px;
			margin-inline-end: 8px;
		}

		@include break-huge {
			margin-inline-start: 0;
			margin-inline-end: 15px;
		}
		.gridicon {
			color: var(--color-neutral-80);
			width: 24px;
			height: 24px;
		}
	}
}

td.site-table__expand-row {
	border-left: none;
}

td.site-table__td-without-border-bottom {
	border-bottom: none;
}

.site-table__expandable-button {
	display: flex;
	position: relative;
	top: 2px;

	@include break-huge {
		right: -10px;
	}

}

td.site-table__error {
	padding: 0 16px;
}

tr.site-table__table-row-site-error {
	background: var(--studio-red-0) !important;
	&:hover,
	&:hover .sites-overview__overlay,
	.sites-overview__overlay {
		background: var(--studio-red-0);
	}
}


td.site-table__td-critical {
	background: var(--studio-red-50);
	padding: 0;
	margin: 16px;

	.sites-overview__row-status {
		max-width: none;
	}
}

tr.site-table__table-row-expanded {
	background: var(--studio-gray-0) !important;
	td {
		border-top: none;
	}
}

.site-table__empty-icon {
	opacity: 0.3;
}
