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

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

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

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

		padding-right: 20px;

		.translation-stats-title {
			display: block;
			margin-bottom: 0.8em;
			font-size: 14px;
			white-space: nowrap;
		}

		.translation-stats-content { // 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 { // Stats bar enabled generic text color.
						color: #000;
						text-shadow: 0 0 6px rgba(255, 255, 225, 0.5);
					}

					&.disabled div { // 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);
						}
					}
				}
			}
		}
	}
}

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

	.check-column {
		padding-top: 0;
		padding-bottom: 0;
	}

	input[type="checkbox"],
	input[type="radio"] {
		vertical-align: text-top;
	}

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

	thead {

		.column-subproject {

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

	tbody {

		tr {

			&.disabled {

				background-color: #f1f1f1;

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

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

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

			.check-column {

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

			td {

				.check-column {
					padding: 0 0 0 2px;
				}
			}
		}

		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 {
			vertical-align: middle;
			text-align: center;
		}

		.check-column.plugin-select {
			vertical-align: middle;
			padding: 0 0 0 2px;
		}

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

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

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

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

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

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

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

		h2.tstats-settings__sidebar__title {
			box-sizing: border-box;
			width: 100%;
			margin: 4px 0 1em 0;
			padding: 10px 0;
			border-bottom: 1px solid $color-primary;
			color: $color-primary;
			line-height: 19px;
			text-align: left;
			white-space: nowrap;
			display: none;
		}

		.postbox {

			.inside {

				h3 {
					margin: 30px 0 0;
				}

				.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;
							background-repeat: no-repeat;
						}

					}

				}

				a {
					text-decoration: none;
				}

			}

			.footer {
				padding: 10px;

			}

		}

	}

}

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

	.dashicons-yes {
		color: #008000;
	}

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

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