// ==========================================================================
// Settings
// ==========================================================================
@use "../../_inc/client/scss/calypso-colors";
@use "../../_inc/client/scss/typography";
@use "../atoms/colors/colors";
@use "../atoms/typography/functions" as typography-functions;

.page-content.configure {
	margin-top: 0;
}

.configure .frame {

	&.top {
		border: none;
		box-shadow: none;
		padding-top: typography-functions.em(20px);
		position: relative;
		top: auto;

		&.fixed {
			background: #f6f7f7;
			border-bottom: 1px solid #e9e9e9;
			padding-left: 160px;
			margin-top: -6px;
			position: fixed;
			right: 0;
			top: 32px;
			width: 100%;
			z-index: 4;
			box-shadow: 0 2px 2px -2px #f0f0f1;

			@media (max-width: 782px) {
				border: none;
				box-shadow: none;
				padding-top: typography-functions.em(20px);
				position: relative;
				top: auto;
			}

			@media (max-width: 600px) {
				top: 0;
			}
		}
	}
}

.jp-frame-top-fixed .configure {
	padding-top: 94px;
}

.filter-search {
	display: none;
	margin-top: 15px;
	float: left;

	@media (max-width: 782px) {
		display: block;
	}

	@media (max-width: 530px) {
		display: none;
	}

	.button {
		background: colors.$white;
		border: 1.5px solid calypso-colors.$black;
		border-radius: 4px;
		font-size: typography.$font-body;
		line-height: 24px;
		letter-spacing: -0.01em;
		color: calypso-colors.$black;
	}
}

// Bulk select table header area.
.fixed-top {
	box-sizing: border-box;
	border-bottom: 1px solid calypso-colors.$gray-5;

	/* Auto layout */
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 16px;
	gap: 16px;

	.tablenav.top {
		display: flex;
		padding: 0;
		margin: 0 0 0 10px;
		height: auto;
	}

	select#bulk-action-selector-top {
		width: 180px;
		height: 40px;
		border: 1px solid #dcdcde;
		border-radius: 4px;
		padding: 8px 16px;
		margin-right: 8px;
		line-height: normal;
		color: calypso-colors.$black;
		font-size: typography.$font-body-small;
		letter-spacing: -0.02em;
	}

	.alignleft.actions.bulkactions {
		display: flex;
		align-items: center;

		.button {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 6px 24px;
			height: 40px;
			background: colors.$white;
			border: 1.5px solid calypso-colors.$black;
			border-radius: 4px;

			// Button label.
			font-size: typography.$font-body;
			line-height: 24px;
			letter-spacing: -0.01em;
			color: calypso-colors.$black;
		}

		.button:hover {
			//border: 1.5px solid $black;
		}
	}
}

#jp-plugin-container .table-bordered {
	border-collapse: collapse;

	.check-column {

		input[type="checkbox"] {
			width: 20px;
			height: 20px;
			border-radius: 2px;
			margin-left: 0;

			&::before {
				margin: -2px;
				color: calypso-colors.$black;
				width: 21px;
				height: 21px;
			}
		}
	}

	.info {
		letter-spacing: -0.02em;
	}

	.row-actions {

		a.dops-button.is-compact {
			color: calypso-colors.$black;
			line-height: 20px;
			font-size: typography.$font-body-extra-small;
			font-weight: 600;
			background: colors.$white;
			border: 1.5px solid calypso-colors.$black;
			border-radius: 4px;
			box-shadow: none;
			text-decoration: none;
			padding: 3px 8px;
		}

		.delete a.dops-button.is-compact {
			color: calypso-colors.$red-50;
			border: 1px solid calypso-colors.$gray-5;
		}

		.configure a {
			color: calypso-colors.$black;
			font-size: typography.$font-body-extra-small;
			line-height: 20px;
			font-weight: 600;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.wrap {
	margin: 0;
	padding: 0 1.5em 1em;
	overflow: hidden;

	//h2 {
	//	font-size: 24px;
	//	font-weight: 400;
	//}
	.manage-left {
		float: left;
		margin: 0;
		padding: 0;
		width: 63%;

		table {
			width: 100%;
		}

		th {
			font-weight: 400;
		}

		@media (max-width: 782px) {
			width: 100%;
		}
	}

	.manage-right {
		margin-top: 24px;
		padding: 0;
		float: right;
		width: 35%;
		z-index: 1;

		p {
			font-size: typography.$font-body-small;
			line-height: 24px;
			letter-spacing: -0.02em;
			font-weight: 700;
			color: calypso-colors.$gray-80;
			margin: 16px 0 4px 0;
		}

		.bumper {
			margin-left: 48px;
		}

		&.show {
			display: block;
			overflow-y: auto;
			overflow-x: hidden;
			position: absolute;
			z-index: 100000; // sits on top of wp-admin bar
		}

		.search-bar {
			margin-bottom: 18px;
			max-width: 300px;
		}

		p.search-box {
			width: 100%;
			height: auto;
			margin: 16px 0 0 0;
			float: none;
			display: block;
			position: static;

			input[type="search"] {
				border: 1px solid calypso-colors.$gray-5;
				border-radius: 4px;
				padding: 8px 16px 8px 40px;
				line-height: 24px;
				font-size: typography.$font-body;
				letter-spacing: -0.02em;
				color: calypso-colors.$black;
				font-weight: 400;
				height: 40px;
				width: 100%;
				background-image: url(../images/icon-search.svg);
				background-repeat: no-repeat;
				background-position: 8px center;
				float: none;

				&::placeholder {
					color: calypso-colors.$gray-30;
				}

				@media (max-width: 782px) {
					max-width: 90%;
				}
			}

			input[type="submit"] {
				display: none;
			}
		}

		.button-group {

			@media (max-width: 782px) {
				white-space: normal;
			}

			.button {
				box-shadow: none;
				padding-left: 24px;
				padding-right: 24px;
				min-width: 90px;
				border: 1px solid calypso-colors.$gray-5;
				color: calypso-colors.$black;
				height: 40px;
				font-size: 13px;
				line-height: 18px;
				font-weight: 400;
				background: colors.$white;

				&:hover {
					background: calypso-colors.$gray-0;
				}

				&:focus {
					border-color: calypso-colors.$black;
				}
			}

			button.dops-button.button.active {
				background: calypso-colors.$black;
				color: colors.$white;
				font-weight: 600;

				&:hover {
					background: calypso-colors.$gray-80;
				}

				&:focus {
					border-color: colors.$white;
					box-shadow: 0 0 0 1px calypso-colors.$black;
				}
			}
		}

		.subsubsub {
			margin: 0;
			padding: 0;

			li {
				display: block;
				text-align: left;
				margin: 0 0 4px 0;
				font-size: 14px;

				a {
					padding: 0;
					color: calypso-colors.$black;
					text-decoration: underline;
					font-size: typography.$font-body-small;
					line-height: 24px;
					letter-spacing: -0.02em;

					&:hover {
						text-decoration-thickness: 3px;
					}
				}

				&.current {
					border-radius: 4px;
					background: calypso-colors.$black;
					padding: 2px 6px;

					a,
					.count {
						color: colors.$white;
						text-decoration: none;
						font-weight: 700;
					}
				}
			}
		}

		@media (max-width: 782px) {
			background: #fff;
			bottom: 0;
			display: none;
			min-width: 300px;
			position: fixed;
			right: 0;
			top: 0;
			z-index: 13;
			box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);

			.bumper {
				margin: 13px;
			}

			.navbar-form {
				margin: 16px 0 0 0;
				padding: 0;
			}
		} // < 782
	}
}

@media (max-width: 782px) {

	// Fix to override particular wp-list-table changes in core - July 2015
	.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary):not(.check-column) {
		padding: 11px 10px;
		display: block;
	}

	.manage-right.show .subsubsub li {
		padding: 5px;
	}

} // < 782

@media (max-width: 650px) {

	.table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
		float: none;
		padding-left: 18px;
	}
}

@media (max-width: 430px) {

	// Hide activate / config links on really small screens.
	// Users can still utilize these actions by tapping on the title of the module.
	.table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
		display: none;
	}

	.table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
		display: block;
	}
} // < 430

// Modules page hacks
.jetpack-modules-list-table-form .widefat td {
	width: 100%;
}

.jetpack-module-list {

	.widefat {
		border: none;
	}

	.wrap {
		display: flex;
		overflow: visible;

		.manage-left {
			flex-grow: 1;
			width: auto;
		}

		.manage-right {
			flex-grow: 0;
		}
	}
}

tr.jetpack-module {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 16px;
	gap: 16px;
	width: 100%;
	height: 60px;
	background: colors.$white;
	border-bottom: 1px solid calypso-colors.$gray-5;

	@media (max-width: 782px) {
		padding: 4px 10px;
		height: auto;
	}

	&:last-of-type {
		border-bottom: 0;
	}

	th.check-column {
		padding-top: 0;
		width: auto;
	}

	a,
	p {
		text-decoration: none;
	}
}

tr.jetpack-module.unavailable {
	background: #f9f9f6;
}

tr.jetpack-module.active {
	background: #f9f9f6;

	.column-name .info {
		font-weight: 700;
	}


}

tr.jetpack-module .column-name {
	color: calypso-colors.$gray-80;
	float: left;
	align-items: center;
	display: flex;
	padding: 0;
}

tr.jetpack-module .row-actions {
	align-items: center;
	display: flex;
	position: relative;
	margin-left: auto;
	left: 0;

	span.configure {
		margin-right: 16px;
	}
}
