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

/* No wrap */
#translation-stats {
	white-space: nowrap;
}

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

	.translation-stats-content {
		display: grid; // Stats grid layout
		grid-row-gap: 6px;
		padding: 6px;
		margin: 0 10px 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;
				}

				/* Stats bar colors from GlotPress */
				div.percent100 {
					.subproject-bar { // Stats bar 100% text color
						color: #fff; // Check duplicate
						text-shadow: 0 0 6px rgba(0, 0, 0, 0.5); // Check duplicate
					}

					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 div,
			a:hover div,
			a: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 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:hover,
			a:focus {
				div {
					width: 100% !important; //Stats bar lenght on hover/focus

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

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