@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';

.mw-tpm-sp-unit {
	padding-bottom: 10px;

	&__source,
	&__target {
		overflow-y: auto;
		border: @border-base;
		border-radius: @border-radius-base;
		resize: vertical;
	}

	&__source,
	&__target,
	&__actions {
		height: 150px;
	}

	&:last-child {
		.mw-tpm-sp-action--swap,
		.mw-tpm-sp-action--add {
			display: none;
		}
	}

	&__actions {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 20px;
	}
}

.mw-tpm-sp-form #title {
	width: 35%;
}

.mw-tpm-sp-container .mw-tpm-sp-unit textarea {
	padding: 10px;
}

.mw-tpm-sp-action {
	cursor: pointer;

	&--delete {
		.cdx-mixin-css-icon( @cdx-icon-trash, @color-subtle, @size-150 );
	}

	&--swap {
		.cdx-mixin-css-icon( @cdx-icon-table-move-row-after, @color-subtle, @size-150 );
	}

	&--add {
		.cdx-mixin-css-icon( @cdx-icon-add, @color-subtle, @size-150 );
	}

	&--clear {
		cursor: pointer;
		position: absolute;
		.cdx-mixin-css-icon( @cdx-icon-clear, @color-subtle, @size-icon-small );
		top: 5px;
		right: 10px;
		border: 0;
		padding: 0;
	}
}

.mw-tpm-sp-error__message {
	font-size: 0.9em;
	word-wrap: break-word;
	border: @border-width-base @border-style-base @border-color-error;
	color: @color-error;
	background-color: @background-color-error-subtle;
}

.mw-tpm-sp-instructions {
	margin: 0.7em 0;
}

.client-nojs .mw-tpm-sp-container {
	display: none;
}

.client-js .tux-nojs {
	display: none;
}