// Import GlotPress Colors
@use "global";

table.wp-list-table.plugins { // WordPress Installed Plugins table.

	th.column-translation-stats { // Translation Stats Column Header.
		white-space: nowrap;
		width: 20%;

		a.tstats-edit-settings-button {
			border-radius: global.$border-radius-outside;
		}
	}

	td.column-translation-stats { // Translation Stats Column.

		padding-right: 20px;

		.translation-stats-title {
			display: block;
			white-space: nowrap;

			p {
				margin-top: 0;
			}

			.tstats-update-link {
				float: right;

				button.tstats-update-button {
					display: none;
					border-radius: global.$border-radius-outside;

					span {
						color: global.$color-primary;
						// Configuration of easeOutCirc.
						@include global.transition-easeOutCubic ( all, 600ms, cubic-bezier(0.075, 0.82, 0.165, 1), 0s );
					}

					&:hover,
					&:focus {

						span {
							transform: rotateZ(180deg);
							color: global.$color-secondary;
						}
					}

				}
			}
		}

		.translation-stats-content {

			.notice {

				&.translation-stats-loading.notice-warning.update-message {

					p::before {
						content: "\f469";
					}
				}
			}

			.translation-stats-content-stats { // Stats grid layout.
				display: grid;
				grid-row-gap: 6px;
				padding: 6px;
				margin: 0 0 10px 0;
				border-radius: global.$border-radius-outside;

				.content__subproject {

					.subproject-bar { // Stats bar size.

						display: block;
						padding: 5px 10px; // Stats bar size
						background-color: rgba(0, 0, 0, 0); // Status bar overlay color
						white-space: nowrap;

						.subproject-bar__percentage { // Stats percentage value
							display: inline-block;
							font-weight: 700;
							text-align: right;
							width: 32px;
							margin-right: 10px;
						}

						.subproject-bar__count { // Stats current/all count value
							display: inline-block;
							font-weight: 600;
						}
					}

					a,
					a div,
					a div .subproject-bar,
					.disabled,
					.disabled .subproject-bar { // Border radius.
						border-radius: global.$border-radius-inside;
					}

					a {
						display: block;

						&.enabled div.subproject { // Stats bar enabled generic text color.
							color: #000;
							text-shadow: 0 0 6px rgba(255, 255, 225, 0.5);
						}

						&.disabled div.subproject { // Stats bar disabled generic text color.
							background-color: #ddd;
							color: #8f98a1;
						}

						div.percent100 {

							.subproject-bar { // Stats bar 100% text color.
								color: #fff;
								text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
							}

							background-color: global.$glotpress-percent100;
						}

						div.percent90 {
							background-color: global.$glotpress-percent90;
						}

						div.percent80 {
							background-color: global.$glotpress-percent80;
						}

						div.percent70 {
							background-color: global.$glotpress-percent70;
						}

						div.percent60 {
							background-color: global.$glotpress-percent60;
						}

						div.percent50 {
							background-color: global.$glotpress-percent50;
						}

						div.percent40 {
							background-color: global.$glotpress-percent40;
						}

						div.percent30 {
							background-color: global.$glotpress-percent30;
						}

						div.percent20 {
							background-color: global.$glotpress-percent20;
						}

						div.percent10 {
							background-color: global.$glotpress-percent10;
						}

						div.percent0 {
							background-color: global.$glotpress-percent0;
						}

					}

					a,
					a:hover,
					a:focus,
					a.enabled div,
					a.disabled div,
					a.enabled:hover div,
					a.disabled:hover div,
					a.enabled:focus div,
					a.disabled:focus div,
					a div.percent0,
					a:hover div.percent0,
					a:focus div.percent0,
					a div.percent100,
					a:hover div.percent100,
					a:focus div.percent100,
					a.enabled div .subproject-bar,
					a.disabled div .subproject-bar,
					a:hover div .subproject-bar,
					a:focus div .subproject-bar, { // Configuration of easeOutCirc.

						@include global.transition-easeOutCubic ( all, 300ms, cubic-bezier(0.075, 0.82, 0.165, 1), 0s );
					}

					a.enabled:hover,
					a.enabled:focus {

						div.subproject {
							width: 100%; // Stats bar length on hover/focus.

							div.subproject-bar {
								background-color: rgba(255, 255, 255, 0.2); // Status bar overlay hover/focus color.
							}
						}

						div.percent0 {

							.subproject-bar { // Stats bar 0% hover/focus text color and shadow.
								color: #fff;
								text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
							}
						}
					}
				}
			}
		}

		&.tstats-loading {

			.translation-stats-content .translation-stats-content-stats div a div.subproject { // https://codepen.io/brunjo/pen/azdWjY

				background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 20px); // Determines size.
				background-size: 28px 28px;
				animation: tstats_bar_loading 0.5s linear infinite;
			}

			@keyframes tstats_bar_loading {

				0% {
					background-position: 0 0;
				}

				100% {
					background-position: 28px 0;
				}
			}


		}

	}
}


table.tstats-plugin-list-table.widefat { // Translation Stats Settings Plugins table.


	&.tablesorter {

		tr.filtered {

			/* Rows hidden by filtering (needed for child rows). */
			display: none;
		}
	}

	tr {

		td,
		th {

			&.plugin-select {
				vertical-align: middle;
				padding-top: 0;
				padding-bottom: 0;

				input[type="checkbox"],
				input[type="radio"] {
					vertical-align: middle;

				}

				input[type="checkbox"][disabled] {
					pointer-events: none;
				}
			}
		}
	}

	thead {

		/* Tablesorter */
		.tablesorter-header {

			&:not(.sorter-false) {

				.tablesorter-header-inner {

					&::after {
						font: normal 20px/1 dashicons;
						vertical-align: bottom;
						color: rgba(global.$color-primary, 1);
					}
				}

				&:hover,
				&:focus {
					cursor: pointer;

					.tablesorter-header-inner {

						&::after {
							color: rgba(global.$color-secondary, 1);
						}
					}
				}


				&.tablesorter-headerUnSorted {

					&:hover,
					&:focus {

						.tablesorter-header-inner {

							&::after {

								/* Arrow up. */
								content: "\f142";

							}
						}
					}
				}

				&.tablesorter-headerAsc {
					//background-color: rgba($color-primary, 0.2);

					.tablesorter-header-inner {

						&::after {

							/* Arrow up. */
							content: "\f142";

						}
					}

					&:hover,
					&:focus {

						.tablesorter-header-inner {

							&::after {

								/* Arrow down. */
								content: "\f140";
							}
						}
					}
				}

				&.tablesorter-headerDesc {

					.tablesorter-header-inner {

						&::after {

							/* Arrow down. */
							content: "\f140";

						}
					}

					&:hover,
					&:focus {

						.tablesorter-header-inner {

							&::after {

								/* Arrow up. */
								content: "\f142";
							}
						}
					}
				}

			}

		}

		.column-subproject {

			width: 10em;
			overflow: hidden;
			text-align: center;
			vertical-align: bottom;

			.column-checkbox {
				margin-top: 0.5em;

				input[type="checkbox"] {
					margin: 0;
				}
			}
		}

		tr {

			input[type="checkbox"][data-indeterminate="true"]:checked {

				&::before {

					// Use the "Minus" SVG Dashicon.
					content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M4%209h12v2h-12v-2z%27%20fill%3D%27%231e8cbe%27%2F%3E%3C%2Fsvg%3E);
					margin: -0.1875rem 0 0 -0.1875rem;
					height: 1.25rem;
					width: 1.25rem;
				}
			}
		}
	}

	tbody {

		tr {

			td,
			th {
				vertical-align: middle;
			}

			&.disabled {

				background-color: #f1f1f1;

				th {
					border-left: 4px solid transparent;
				}

				.plugin-name {
					padding: 10px 9px;
				}

				.plugin-name,
				.plugin-author,
				.plugin-slug-text-domain {
					opacity: 0.33;
				}
			}

			.plugin-select {

				padding: 0 0 0 2px;

			}

			input[type="checkbox"] {
				margin-top: 0;
				margin-bottom: 0;
				margin-right: 0;
			}

			&.active {

				th {
					border-left: 4px solid #72aee6;
				}

				&[data-subprojects="1"],
				&[data-subprojects="2"],
				&[data-subprojects="3"] {

					th.plugin-select {

						input[type="checkbox"].checkbox-plugin:checked {

							&::before {

								// Use the "Minus" SVG Dashicon.
								content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M4%209h12v2h-12v-2z%27%20fill%3D%27%231e8cbe%27%2F%3E%3C%2Fsvg%3E);
								margin: -0.1875rem 0 0 -0.1875rem;
								height: 1.25rem;
								width: 1.25rem;
							}
						}
					}
				}

			}

			td {

				&.plugin-slug-text-domain {

					div {
						display: table-cell;
						vertical-align: middle;

						&.plugin-slug-text-domain-icon {

							span.dashicons {

								&.dashicons-yes {
									color: #008000;
								}

								&.dashicons-no {
									color: #f00;
								}
							}
						}

						&.plugin-slug-text-domain-message {

							code {
								display: inline-block;

								&.code-error {
									background-color: rgba(255, 0, 0, 0.07);
									color: #f00;
								}
							}
						}
					}
				}
			}
		}

		tr.active + tr.inactive td,
		tr.active + tr.inactive th,
		tr.active + tr.disabled td,
		tr.active + tr.disabled th {
			border-top: 0 solid;
		}

		.plugin-subproject {
			text-align: center;
		}

		.inactive .plugin-select {
			padding: 0 0 0 6px;
		}
	}
}

.tstats-settings-wrapper { // Translation Stats Settings Layout.
	display: flex;
	flex-wrap: wrap;

	@media (min-width: global.$break-large) {
		flex-wrap: nowrap;
	}

	.tstats-settings__content { // Translation Stats Settings Content.
		width: 100%;

		.nav-tab-wrapper {

			a.nav-tab {

				span.dashicons {
					color: global.$color-primary;

					vertical-align: text-top;
				}

			}

			a.nav-tab-active,
			a.nav-tab:hover,
			a.nav-tab:focus {

				span.dashicons {
					color: global.$color-secondary;
				}
			}
		}

		@media (min-width: global.$break-large) {
			order: 1;
			overflow: auto;
		}
	}

	.tstats-settings__sidebar { // Translation Stats Settings Sidebar.
		width: 100%;
		// flex-shrink: 0;
		padding: 0;

		@media (min-width: global.$break-large) {
			width: 25%;
			min-width: 280px;
			max-width: 350px;
			padding-left: 20px;
			order: 2;
		}

		.postbox {
			border-radius: global.$border-radius-outside;

			.inside {

				h3 {
					margin: 30px 0 0;
				}

				a {
					text-decoration: none;
				}

				.tstats-logo {
					//padding: 10px;

					a.tstats-logo-link {
						display: block;
						width: 100%;

						div.tstats-logo-image {
							margin: auto;
							background-image: url(../images/logo-color-transparent.svg);
							background-position: center;
							background-size: contain;
							height: 120px;
							width: 230px;
							background-repeat: no-repeat;
						}

					}

				}

				.tstats-sponsor {

					h3::after {
						content: " ☕";
					}

					ul {

						form {

							button.tstats-github-sponsor {

								span,
								i {
									vertical-align: text-top;
									font-size: large;
								}

								span {
									color: #ea4aaa;
								}
							}
						}
					}
				}

			}

			.footer {
				padding: 10px;

			}

		}

		.paper-shadow {
			position: relative;

			&::before,
			&::after {
				z-index: -1;
				position: absolute;
				content: "";
				bottom: 1em;
				width: 50%;
				top: 80%;
				background: global.$color-shadow;
				box-shadow: 0 1em 0.5em global.$color-shadow;
			}

			&::before {
				transform: rotate(-3deg);
				left: 0.5em;
			}

			&::after {
				transform: rotate(3deg);
				right: 0.5em;
			}
		}
	}
}

#tab-debug {

	.tstats-code-block {
		overflow: auto;
		display: block;

		.dashicons-yes {
			color: #008000;
		}

		.dashicons-no {
			color: #f00;
		}
	}

	.tstats-debug-block {
		width: calc(100% - 29px);
		height: 60vh;
		overflow: auto;
	}

}

.tstats-debug-block {
	display: inline-block;
}