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

body.is-section-plugins .plugin-management-wrapper {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	.navigation-header {
		border-block-end: 1px solid var( --color-neutral-5 );
		padding-inline: 48px;

		@media ( max-width: 430px ) {
			padding-inline: 24px;
		}

		.navigation-header__main {
			margin: auto;
		}
	}
}

body.is-section-plugins .plugin-management-wrapper,
.is-section-jetpack-cloud-plugin-management .plugin-management-wrapper {
	.dataviews-wrapper {
		margin: auto;

		.dataviews-view-table {
			.dataviews-view-table__row {
				td:nth-child( 2 ) {
					white-space: break-spaces;
				}

				th,
				td {
					border-bottom: none;
				}
			}
		}
	}

	.dataviews-pagination {
		padding: 12px 16px 12px 16px;
	}

	.plugin-name-button {
		padding: 0;
		text-align: start;
		height: auto;
	}
}

.is-section-jetpack-cloud-plugin-management {
	--wp-admin-theme-color: var( --studio-jetpack-green-50 );
	height: 100%;
	overflow: hidden;

	.wpcom-site .main.hosting-dashboard-layout.sites-dashboard,
	.wpcom-site .main.hosting-dashboard-layout.sites-dashboard.sites-dashboard__layout .hosting-dashboard-layout-with-columns__container {
		overflow: hidden;
		height: calc( 100vh - 50px );
		min-height: calc( 100vh - 64px );
		padding: 0;
	}

	.sites-dashboard__layout.preview-hidden .sites-overview,
	.sites-dashboard__layout:not(.preview-hidden) .hosting-dashboard-layout-column {
		padding: 0;
	}

	@media ( max-width: 660px ) {
		.wpcom-site .main.hosting-dashboard-layout.sites-dashboard {
			min-height: 100vh;
			.hosting-dashboard-layout__header-main {
				display: block;
			}
		}

		.hosting-dashboard-layout__top-wrapper {
			display: none;
		}

	}

	.wpcom-site .main.hosting-dashboard-layout.sites-dashboard .hosting-dashboard-layout__top-wrapper {
		background-color: var(--color-surface-backdrop);

		.hosting-dashboard-layout__viewport {
			padding-inline: 0;
		}
	}

	.sites-dashboard:not(.preview-hidden) .hosting-dashboard-layout__viewport {
		width: 360px
	}

	.select-partner-key {
		padding: 0 40px;
	}

	.dataviews-wrapper {
		button {
			border: none;
			background-color: transparent;

			&:hover {
				background-color: var( --color-background-alt );
			}
		}

		thead .dataviews-view-table__row button {
			&:focus {
				box-shadow: none;
			}
		}

		.dataviews-view-table__row {
			th,
			td {
				border-bottom: none;
			}
		}
	}

	.layout__primary,
	.plugins-overview__container {
		height: 100%;
	}

	.layout__content {
		height: 100%;
	}

	.plugins__top-container-jc,
	.plugins__main-content-jc {
		margin-inline: -32px;
	}

	.plugin-management-wrapper {
		.plugins__page-title-container {
			padding-inline: 48px;
		}
	}
}

.sites-manage-plugin-status-button {
	padding: 0;
	display: contents;
}

.sites-manage-plugin-button {
	margin-left: -12px;
	font-size: inherit;
	color: inherit;
	cursor: pointer;
}

.plugin-name-container {
	text-overflow: ellipsis;
	overflow: hidden;
}
