.community-translator__element {
	display: inline-block;
	cursor: pointer;
	z-index: z-index("root", ".popover");
	&.is-untranslated {
		text-shadow: 0 0 10px #f00, 0 0 2px #dd3d36 !important;
	}
	&:hover {
		border-bottom: 1px dotted var(--color-neutral-0);
	}
}

.community-translator__dialog {
	width: 50%;
}

.community-translator__dialog-header {
	margin-bottom: 14px;
	font-weight: 600;
	border-bottom: 1px solid var(--color-neutral-0);
	padding-bottom: 7px;
	h2 {
		font-weight: normal;
		display: inline-block;
		font-size: $font-title-small;
	}
	nav {
		text-align: right;
		display: block;
		float: right;
		padding-top: 7px;
	}
}

.community-translator__dialog-content {
	font-size: $font-body-extra-small;
}

.community-translator__string-container {
	margin-bottom: 20px;
	display: flex;
	border-top: 1px solid var(--color-neutral-0);
	padding-top: 10px;
	&:first-child {
		border-top: 0;
	}
	> span {
		font-weight: 600;
		display: block;
		flex-basis: 85%;
	}
	.community-translator__string-description {
		margin-right: 7px;
		flex-basis: 15%;
		font-size: $font-body-small;
		font-style: italic;
		color: var(--color-neutral-20);
	}
	dfn {
		margin-bottom: 5px;
		display: block;
		font-size: $font-body-small;
	}
	textarea {
		min-height: auto;
		padding: 7px;
		line-height: 1;
		font-size: $font-body-extra-small;
	}
	&.placeholder > span {
		animation: pulse-light 800ms ease-in-out infinite;
		background: var(--color-neutral-10);
		height: 20px;
	}
}

.community-translator__nav-link,
.community-translator__close-icon,
.community-translator__settings-link {
	display: inline-block;
	margin-left: 7px;
	cursor: pointer;
}

