// Translation Stats widget styles, shared by the admin screens and the block.
@use "global";

@mixin stats-widget { // Translation Stats widget, in the plugins column and the themes details.

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

		p {
			margin-top: 0;
		}

		a,
		button.tstats-update-button { // Language link and update button, without the underline of the links and button links outside the list tables.
			text-decoration: none;
		}

		.tstats-update-link {
			float: right;

			.tstats-update-status { // Update status, shown in the title to not move the stats.
				margin-right: 4px;
				font-size: 12px;
				font-style: italic;
				color: global.$color-shadow;
				vertical-align: middle;
			}

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

				&.waiting { // Dim the still icon while the update is queued.
					cursor: default;

					span.dashicons {
						transform: none;
						color: global.$color-primary;
						opacity: 0.4;
					}
				}

				&.updating { // Spin the icon while updating.
					cursor: default;

					span.dashicons {
						color: global.$color-secondary;
						animation: tstats_update_spin 1s linear infinite;

						@media (prefers-reduced-motion: reduce) {
							animation: none;
						}
					}
				}

				@keyframes tstats_update_spin {

					0% {
						transform: rotateZ(0deg);
					}

					100% {
						transform: rotateZ(360deg);
					}
				}

			}
		}
	}

	.translation-stats-content {

		.notice {

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

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

		.translation-stats-content-stats { // Stats grid layout.

		a { // Stats bars links, without the default underline outside the list tables.
			text-decoration: none;
		}

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

					&.placeholder div.subproject { // Empty stats bar while queued, static with the light grey of the loading stripes.
						background-color: #e6e6e6;
						color: rgba(0, 0, 0, 0.55); // Stats bar text color, greyed.
					}

					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;

			@media (prefers-reduced-motion: reduce) {
				animation: none;
			}
		}

		.translation-stats-content .translation-stats-content-stats div a.placeholder div.subproject { // Empty stats bar while loading, with the moving stripes.
			background-color: #ddd;
		}

		@keyframes tstats_bar_loading {

			0% {
				background-position: 0 0;
			}

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


	}
}