// Import GlotPress Colors
@import "_global.scss";

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

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

	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 {
					box-shadow: none;
					display: none;

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

						&:hover,
						&:focus {
							transform: rotateZ(180deg);
							color: $color-secondary;

						}
					}
				}
			}
		}

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

			.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;
					}
				}

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

				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: $glotpress-percent100;
					}

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

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

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

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

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

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

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

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

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

					div.percent0 {
						background-color: $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 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 {

			&.check-column {
				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($color-primary, 1);
					}
				}

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

					.tablesorter-header-inner {

						&::after {
							color: rgba($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: text-top;
		}
	}

	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;
				}
			}

			.check-column {

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

					&:indeterminate::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;
		}

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

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

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

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

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

		.nav-tab-wrapper {

			a.nav-tab {

				span.dashicons {
					color: $color-primary;

					vertical-align: text-top;
				}

			}

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

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

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

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

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

		.postbox {
			border-radius: 4px;

			.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(../img/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: $color-shadow;
				box-shadow: 0 1em 0.5em $color-shadow;
			}

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

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

.tstats-code-block {
	display: inline-block;

	.dashicons-yes {
		color: #008000;
	}

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

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