:root {
	--ep-synonyms-input-border-color: hsl(0, 0%, 80%);
	--ep-synonyms-color-black: #1a1e24;
	--ep-synonyms-color-error: #b52727;
}

html.wp-toolbar {
	background: transparent;
}

#synonym-root {

	& .page-title-action {
		margin-left: 10px;
	}

	& .postbox .hndle {
		cursor: default;
	}

	& h2 {
		color: var(--ep-synonyms-color-black);
	}
}

.synonym-editor {

	& .postbox {
		width: 100%;

		& > .hndle {
			display: flex;
		}
	}
}

.synonym-alternative-editor,
.synonym-set-editor {
	align-items: flex-start;
	display: flex;

	& .components-form-token-field {
		flex: 1;
		margin-bottom: 0.5em;
	}

	& .components-form-token-field__label {
		display: none;
	}

	& .components-form-token-field__input-container {
		border-color: var(--ep-synonyms-input-border-color);
		box-sizing: border-box;
	}

	& .components-form-token-field__token-text {
		padding-bottom: 1px;
		padding-top: 1px;

		@media screen and (max-width: 782px) {
			padding-bottom: 3px;
			padding-top: 3px;
		}
	}

	& input[type="text"].components-form-token-field__input {
		margin-bottom: 2px;
		margin-top: 2px;

		@media screen and (max-width: 782px) {
			min-height: 30px;
		}
	}

	& .components-form-token-field__help {
		margin-top: 0;
	}
}

input[type="text"].ep-synonyms__input {
	border: 1px solid var(--ep-synonyms-input-border-color);
	margin-bottom: 0.5em;
	margin-right: 1em;
	min-height: 36px;
	width: 10em;

	@media screen and (max-width: 782px) {
		min-height: 40px;
	}
}

.synonym-alternatives__primary-heading {
	width: 11em;
}

.synonym-alternatives__input-heading {
	flex: 1;
}

button.synonym__remove {
	background-color: transparent;
	border: none;
	color: var(--ep-synonyms-color-error);
	cursor: pointer;
	margin: 0 0 0 10px;
	min-height: 36px;
	padding: 0;

	@media screen and (max-width: 782px) {
		min-height: 40px;
	}

	& .dashicons-dismiss {
		margin: -2px 2px 0 0;
	}
}

.synonym__validation::before {
	content: "";
	flex-basis: 100%;
	height: 0;
}

.synonym__validation,
.synonym-solr-editor__validation p {
	color: var(--ep-synonyms-color-error);
	font-style: italic;
}

.synonym__validation {
	margin: 0 0 0.625em 0.5em;
}

.synonym-btn-group button.button {
	margin-right: 0.625em;
}