/**
 * Temporary override while GlotPress with Variants doesn't have this CSS.
 */
table {

	&.translations {

		tr {

			td {

				&.original,
				&.translation {
					width: 45%;
					vertical-align: middle;

					small {
						font-size: 0.75rem;
					}

					ul {
						margin: 0;
						padding: 0;
						list-style: none;

						li {

							&:not(:last-child) {
								padding-bottom: 0.25em;
								border-bottom: 1px solid #e4e4e4;
							}

						}

					}

				}

				&.translation {

					// Highlight conversion difference.
					// Needed for the GP-Convert-PT-AO90.
					.translation-text {

						ins {
							background-color: #68de7c;
							text-decoration: none;
							display: inline-block;
						}

					}

				}

			}

		}

	}

	&.translation-sets {

		tr {

			th.gp-column-locale {
				min-width: 400px;
				width: 45%;
			}

			td:first-child {

				span.gp-convert-pt-ao90-update {

					span.translation-set-icon {
						margin-left: 0.5em;
						vertical-align: middle;
						font-size: 1em;
						display: inline-block;
						line-height: normal;
						color: var(--gp-color-fg-muted);

						&.edit-status {
							display: none;
						}

					}

					button.gp-convert-pt-ao90-update-button {
						margin-left: 0.5em;
						vertical-align: bottom;

						&:not(:disabled):hover,
						&:not(:disabled):focus,
						&:not(:disabled).active {

							span {

								&.icon {
									color: var(--gp-color-btn-hover-text);
									transform: rotateZ(180deg);
								}

							}

						}

						&:disabled {
							color: var(--gp-color-fg-default) !important;
						}

						span {


							&.icon {
								-webkit-transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
								-moz-transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
								-o-transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
								transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
							}

							&.label {
								margin-left: 0.5em;
								margin-right: 0.5em;
								vertical-align: middle;
								text-align: left;
								display: inline-block;
								line-height: normal;
							}

						}

						&.updating {

							span.icon {
								color: var(--gp-color-dark-orange);
								animation: rotation 2s infinite linear;

								@keyframes rotation {

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

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

								}

							}

						}

						&.success {

							span.icon {
								color: var(--gp-color-green);
							}

						}

						&.fail {

							span.icon {
								color: var(--gp-color-red);
							}

						}

					}

				}

			}

			&.variant {

				td {

					&:first-child {
						color: var(--gp-color-accent-fg);

						&::before {
							font-family: dashicons;
							content: "\f139";
							vertical-align: middle;
						}

					}

				}

			}

			&[data-editable="false"] {
				background-color: var(--gp-color-secondary-100);

				&:hover {
					background-color: var(--gp-color-secondary-200);
				}

				td {

					&:first-child {

						span.gp-convert-pt-ao90-update {

							span.translation-set-icon {

								&.edit-status {
									display: inline-block;
								}

							}

						}

					}

				}

			}

		}

	}

}